• 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

1. Functions, variables, and class definitions are hoisted to the top.

2. let and const are initialized only after they are used.

3. The most important concepts in JavaScript.

4. To avoid bugs, always declare all variables at the beginning of every scope.

1. JavaScript Pure Functions.

    JavaScript Pure Function Without modifying value return. like predictable out value.

2. JavaScript Impure Functions. 

    JavaScript Impure Function value is change every time.

1. JavaScript Spread Operator.

2. JavaScript Rest Operator.

1. JavaScript Closures.

2. JavaScript Callbacks.

3. JavaScript Callback Hell.

4. JavaScript Currying Function.

//using arrow function

const sendemail = (to) => (from) => (body) => { return to + ' - ' + from + ' - ' + body};

console.log('sendemail--->', sendemail('to@gmail.com')('from@gmail.com')('Body data.'));

// output : sendemail---> to@gmail.com - from@gmail.com - Body data.