useEffect, useRef, useCallback hooks in React.js

Posted on by
  1. useEffect:
    The useEffect hook is used to perform side effects in functional components. It’s similar to lifecycle methods such as componentDidMount, componentDidUpdate, and componentWillUnmount in class components. Example:
   import React, { useState, useEffect } from 'react';

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

       useEffect(() => {
           // This function will run after every render
           document.title = `You clicked ${count} times`;
       });

       return (
           <div>
               <p>Count: {count}</p>
               <button onClick={() => setCount(count + 1)}>Increment</button>
           </div>
       );
   }
  1. useRef:
    The useRef hook is used to create a mutable reference that persists across renders. It’s useful for accessing and interacting with DOM elements, as well as storing mutable values that don’t trigger re-renders. Example:
   import React, { useRef } from 'react';

   function TextInputWithFocusButton() {
       const inputRef = useRef(null);

       const handleClick = () => {
           // Focus on the input element when the button is clicked
           inputRef.current.focus();
       };

       return (
           <div>
               <input ref={inputRef} type="text" />
               <button onClick={handleClick}>Focus Input</button>
           </div>
       );
   }
  1. useCallback:
    The useCallback hook is used to memoize functions, preventing unnecessary re-renders of components that depend on those functions. It’s particularly useful for optimizing performance when passing callbacks to child components. Example:
   import React, { useState, useCallback } from 'react';

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

       // Define a memoized callback function
       const handleClick = useCallback(() => {
           setCount(count + 1);
       }, [count]);

       return (
           <div>
               <p>Count: {count}</p>
               <ChildComponent onClick={handleClick} />
           </div>
       );
   }

   function ChildComponent({ onClick }) {
       return (
           <button onClick={onClick}>Increment</button>
       );
   }

These are just a few examples of how you can use useEffect, useRef, and useCallback hooks in React to handle side effects, manage references, and optimize performance. Each hook serves a specific purpose and can be used to enhance the functionality and efficiency of your React components.