Hooks in ReactJs..

What is Hooks in React ?

Hooks are special functions in React that allow us to "hook into" React features like state, lifecycle methods, context, etc.. in functional components. Before hook introduction, these features were only available in class components, but with hooks, you can use them in functional components, which males the code simpler and more reusable.

Why we use React Hooks ?

1. Simpler Syntax: Hooks allow us to write less code. We don’t have to worry about class components.

2. State Management: Hooks like useState enable functional components to have their own state, which was only possible in class components before.

3. Reusability: Hooks make it easier to share logic between components. We can also create Custom hooks to encapsulate common functionality and then reused in multiple components. Instead of writing the same useEffect and fetch logic repeatedly, we can create a custom hook like useFetch. This hook handles the API call and returns the data, which we can reuse in any component.

4. Lifecycle Methods: Hooks like useEffect allow you to manage side effects (e.g., data fetching) without the need for class-based lifecycle methods (like componentDidMount).

Some of the Important Hooks in ReactJs

1. useState

• Manages state in functional components.

• Updates the state and triggers re-render when the state changes.

• Stores a value and updates it when needed.

• Syntax:

    const [state, setState] = useState(initialValue);
  

2. useEffect

• Manages side effects (example: fetching data, DOM updates).

• Runs after every render by default.

• Can be optimized with dependencies.

• Syntax:

    useEffect(() => {
      // Side effect logic
    }, [dependencies]);
  

• Note it 📝:

  • Without dependencies: Runs after every render.

  • With dependencies: Runs only when dependencies change.

3. useContext

• Simplifies state management by avoiding "prop drilling".

• Provides a way to share values across the component tree.

• Syntax:

    const value = useContext(MyContext);
  

• Benefit: Directly accesses shared state wherever required.

4. useCallback

• Memoizes a function to prevent unnecessary re-creation.

• Useful when passing callbacks to child components.

• It Improves performance by avoiding re-renders.

• Syntax:

    const memoizedFunction = useCallback(() => {
      // Function logic
    }, [dependencies]);
  

  • With Dependencies: The function is re-created only when the dependencies change. This is useful to avoid triggering unnecessary renders.

  • Without Dependencies: The function is memoized only once and never re-created.

5. useMemo

• Memoizes a value or the output of a function.

• Prevents re-calculation unless dependencies change.

• Syntax:

    const memoizedValue = useMemo(() => expensiveCalculation(), [dependencies]);
  

• Difference from useCallback (Note 📝):

  • useMemo: Memoizes the result.

  • useCallback: Memoizes the entire function.

6. useRef

• Stores a value or DOM reference without causing re-renders.

• Use-cases:

  • Accessing DOM nodes.

  • Storing mutable values that don’t trigger re-renders.

• Syntax:

    const ref = useRef(initialValue);
    ref.current; // Access stored value
  

React Hooks Comparison Table

Here i am wrapping this topic.
Enjoy Learning, Stay happy and blessed.
Have a Great day ahead.

Leave a comment ❤
Lot’s of love from Murtuza Rangwala