Introduction to Hooks in React:

1. Definition:

   • Hooks are functions that allow functional components to access React state and lifecycle features.

   • They were introduced in React 16.8 to address the limitations of class components and promote the use of functional components.

2. Motivation:

   • Simplify and streamline state management and side effects in functional components.

   • Reduce the complexity of component logic and improve code readability.

   • Encourage the reuse of logic across components.

3. Built-in Hooks:

   • React provides several built-in hooks that cover common use cases:

     • useState: Allows functional components to manage local state.

     • useEffect: Enables side effects like data fetching, subscriptions, or DOM manipulation.

     • useContext: Provides access to the nearest context.

     • useReducer: Alternative to useState for managing complex state logic.

     • useCallback, useMemo: Memoize functions and values to optimize performance.

     • useRef: Access and interact with DOM elements or store mutable values.

     • useLayoutEffect: Similar to useEffect, but fires synchronously after all DOM mutations.

1. useState Hook:

• Allows functional components to manage local state.

import React, { useState } from 'react';

function Counter() {
  // Declare a state variable named "count" initialized to 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      {/* Event handler to increment count */}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

2.useEffect Hook:

• Enables side effects like data fetching, subscriptions, or DOM manipulation.

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

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

  // useEffect hook to perform side effects
  useEffect(() => {
    // Update the document title after every render
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>Count: {count}</p>
      {/* Event handler to increment count */}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Example;

3.useEffect Hook with All Possibilities:

1. Basic Usage: 🚨💀

Description: The simplest form of useEffect takes a callback function and runs it after every render.

useEffect(() => {
  console.log('Component rendered - This effect runs after every render');
});

🚨💀 Side Effects Without Dependencies: 💀🚨

• Description: If you don't provide a dependency array, the effect runs after every render, which may lead to 🐌 performance issues if not used carefully.

2. Usage with Dependency Array:

Description:useEffect can take a dependency array as the second argument. This array contains variables that, when changed, trigger the effect to re-run.

useEffect(() => {
  console.log('Counter value changed:', counter);
}, [counter]);

3. Usage with Empty Dependency Array:

Description: Providing an empty dependency array ensures that the effect runs only once after the initial render.

useEffect(() => {
  console.log('Component mounted : Only once after Initial Render');
}, []); // Empty dependency array ensures the effect runs only once after mount

4. Cleanup Function:

Description:useEffect can return a cleanup function to perform any necessary cleanup when the component unmounts.

useEffect(() => {
  const subscription = subscribeToData();

  // Cleanup function
  return () => {
    subscription.unsubscribe();
  };
}, []); // Empty dependency array ensures the effect runs only once after mount

5. Combining Multiple useEffect Calls:

Description: You can use multiple useEffect calls in a single component to separate concerns and manage side effects independently.

useEffect(() => {
  console.log('Effect 1');
}, [value1]);

useEffect(() => {
  console.log('Effect 2');
}, [value2]);

6. Conditionally Running Effects:

Description: You can conditionally run effects by placing the condition inside the effect itself.

useEffect(() => {
  if (condition) {
    console.log('Effect runs when condition is true');
  }
}, [condition]);

7. Using useEffect for Document Title Updates:

Description:useEffect can be used to dynamically update the document title based on component state.

useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);