• Passing a function as prop to React.memo child
• Prevents unnecessary re-renders
• Setting up event handlers inside components
• Prevents recreation of handler functions
• Functions inside useEffect/useMemo that need stable reference
• Avoids infinite loops or unnecessary logic execution

Example : 

import React, { useCallback, useState } from 'react';

import './App.css';

import Dashboard from './component/Dashboard';

const Child = React.memo(({ onClick }) => {

  console.log('Child rendered');

  return <button onClick={onClick}>Click Me</button>;

});

function App() {

  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {

    console.log('Clicked');

  }, []);

  return (

    <div className="App">

      <Dashboard />

      <h2>React useCallback Example</h2>

      <p>Count: {count}</p>

      <button onClick={() => setCount(count + 1)}>Increment</button>

      <Child onClick={handleClick} />

    </div>

  );

}

export default App;

• Automatically focus the input on mount.
• Allow the user to click a "Focus Input" button to manually refocus.
• Autofocuses an input on mount
• Tracks the previous input value
• Shows how many times the input changed without causing re-renders

Example : 

import { useRef, useEffect, useState } from 'react';

const TodoAppUseRef = () => {

  const inputRef = useRef(null); // Ref for input focus

  const prevInputRef = useRef(''); // Ref for previous input value

  const [tasks, setTasks] = useState([]);

  const [inputValue, setInputValue] = useState('');

  // Auto-focus input on mount

  useEffect(() => {

    inputRef.current?.focus();

  }, []);

  // Update previous input value after each change

  useEffect(() => {

    prevInputRef.current = inputValue;

  }, [inputValue]);

  const handleAddTask = () => {

    if (inputValue.trim()) {

      setTasks([...tasks, inputValue.trim()]);

      setInputValue('');

      inputRef.current?.focus(); // Refocus after adding

    }

  };

  return (

    <div style={{ padding: '2rem', fontFamily: 'Arial', maxWidth: 500 }}>

      <h2>📝 To-Do List</h2>

      {/* Input with ref and value tracking */}

      <input

        ref={inputRef}

        type="text"

        value={inputValue}

        placeholder="Enter a task..."

        onChange={(e) => setInputValue(e.target.value)}

        style={{

          padding: '0.5rem',

          width: '100%',

          marginBottom: '0.5rem',

          fontSize: '1rem',

        }}

      />

      {/* Previous value display */}

      <p style={{ fontSize: '0.9rem', color: 'gray' }}>

        🔙 Previous Input: <strong>{prevInputRef.current}</strong>

      </p>

      {/* Action buttons */}

      <div style={{ display: 'flex', gap: '1rem', marginBottom: '1rem' }}>

        <button onClick={handleAddTask}>Add Task</button>

        <button onClick={() => inputRef.current?.focus()}>🔍 Focus Input</button>

      </div>

      {/* Task list */}

      <ul>

        {tasks.map((task, index) => (

          <li key={index} style={{ padding: '0.3rem 0' }}>

            ✅ {task}

          </li>

        ))}

      </ul>

    </div>

  );

};

export default TodoAppUseRef;

2. Deploy applications quickly.

3. Docker is a containerization platform that simplifies the process of deploying and managing applications. Applications run along with their dependencies. 

Docker Images :

1. A copy of our project.

2. Images are made from source code, libraries, and external dependencies.

3. Images are created from source code.

4. Example: Node setup, application code, installed libraries, Docker files.

5. Once an image is created, it cannot be updated; we can create a new image instead.

Docker Container :

1. A container runs applications using images.

2. Containers run independently.

3. Example: If 3 images are available, all these images can run independently.  

Docker Commands :

1. docker build -t folder/dockername . // Creates a project image.

2. docker run -p 5000:5000 -d dockerImageName // Runs a container.

3. docker ps // Shows all running containers.

4. docker logs container_id // Displays project logs.

5. docker image prune // Removes unused images.

6. docker service scale web-app=2 // Scales the web-app service to two replicas.

7. docker service update --image <new-image> service_name // Updates a Docker container's image without causing downtime. 

Docker File Example :

3. Here’s an example of a docker-compose.yml file for a microservices architecture:

    docker-compose.yml Example : 

1. Go to google Gmail account setting 

    → Go to Forwarding and POP/IMAP 

2. After go to : manage your google account 

    → Go to security page 

    → Less secure option is enable

3. Email smtp setting : 

    → Server name : smtp.gmail.com ,

    → Port : 587 for Gmail account,

    → Username and password google account

    → Sender name enter 

    → Save 

1. Download access key and secret key excel file.

2. Go to verified identity -> Create Identity -> Verify email received in email account and verified.

3. npm install aws-sdk