ullas kunder

Designer & Developer

Basic of react hooks


Essential React Hooks

useState:

  • useState allows you to add state to functional components.
  • It returns an array with two elements: the current state value and a function to update it.
  • Example:

    import React, { useState } from "react";
    
    const Counter = () => {
      const [count, setCount] = useState(0);
    
      const increment = () => {
        setCount(count + 1);
      };
    
      return (
        <div>
          <p>Count: {count}</p>
          <button onClick={increment}>Increment</button>
        </div>
      );
    };

useEffect:

  • useEffect allows you to perform side effects in functional components.
  • It replaces componentDidMount, componentDidUpdate, and componentWillUnmount.
  • Example:

    import React, { useState, useEffect } from "react";
    
    const DataFetcher = () => {
      const [data, setData] = useState(null);
    
      useEffect(() => {
        fetchData().then((result) => {
          setData(result);
        });
      }, []);
    
      return <div>{data}</div>;
    };

useContext:

  • useContext allows you to access the nearest context's value.
  • It replaces the need for context consumers.
  • Example:

    import React, { useContext } from "react";
    
    const ThemeContext = React.createContext("light");
    
    const ThemeConsumer = () => {
      const theme = useContext(ThemeContext);
    
      return <div>Current theme: {theme}</div>;
    };

useReducer:

  • useReducer is an alternative to useState when state logic is complex.
  • It allows you to manage state with a reducer function, similar to Redux.
  • Example:

    import React, { useReducer } from "react";
    
    const initialState = { count: 0 };
    
    const reducer = (state, action) => {
      switch (action.type) {
        case "increment":
          return { count: state.count + 1 };
        case "decrement":
          return { count: state.count - 1 };
        default:
          throw new Error();
      }
    };
    
    const Counter = () => {
      const [state, dispatch] = useReducer(reducer, initialState);
    
      const increment = () => {
        dispatch({ type: "increment" });
      };
    
      const decrement = () => {
        dispatch({ type: "decrement" });
      };
    
      return (
        <div>
          <p>Count: {state.count}</p>
          <button onClick={increment}>Increment</button>
          <button onClick={decrement}>Decrement</button>
        </div>
      );
    };

useRef:

  • useRef allows you to persist a value across renders without triggering a re-render.
  • It can be used to access the DOM or store mutable values.
  • Example:

    import React, { useRef } from "react";
    
    const InputWithFocus = () => {
      const inputRef = useRef(null);
    
      const focusInput = () => {
        inputRef.current.focus();
      };
    
      return (
        <div>
          <input ref={inputRef} />
          <button onClick={focusInput}>Focus Input</button>
        </div>
      );
    };

useMemo:

  • useMemo allows you to memoize expensive calculations and avoid unnecessary re-computations.
  • It takes a function and a dependencies array and returns the memoized value.
  • Example:

    import React, { useMemo } from "react";
    
    const ExpensiveCalculation = ({ a, b }) => {
      const result = useMemo(() => {
        // Perform expensive calculation using a and b
        return a * b;
      }, [a, b]);
    
      return <div>Result: {result}</div>;
    };

useCallback:

  • useCallback allows you to memoize functions and prevent unnecessary re-renders.
  • It takes a function and a dependencies array and returns the memoized function.
  • Example:

    import React, { useCallback } from "react";
    
    const MemoizedButton = ({ onClick }) => {
      const memoizedOnClick = useCallback(() => {
        // Do something when the button is clicked
        onClick();
      }, [onClick]);
    
      return <button onClick={memoizedOnClick}>Click me</button>;
    };

useLayoutEffect:

  • useLayoutEffect is similar to useEffect but fires synchronously after all DOM mutations.
  • It can be used when you need to read or manipulate the DOM immediately after the component has updated.
  • Example:

    import React, { useLayoutEffect } from "react";
    
    const LogWindowDimensions = () => {
      useLayoutEffect(() => {
        const handleResize = () => {
          // Log window dimensions
          console.log(window.innerWidth, window.innerHeight);
        };
    
        window.addEventListener("resize", handleResize);
        return () => {
          window.removeEventListener("resize", handleResize);
        };
      }, []);
    
      return <div>Check the console for window dimensions</div>;
    };

useImperativeHandle:

  • useImperativeHandle allows you to customize the instance value that is exposed to parent components when using ref forwarding.
  • It is typically used in conjunction with forwardRef.
  • Example:

    import React, { useImperativeHandle, forwardRef } from "react";
    
    const CustomInput = forwardRef((props, ref) => {
      const inputRef = useRef(null);
    
      useImperativeHandle(ref, () => ({
        focus: () => {
          inputRef.current.focus();
        },
        // More custom methods...
      }));
    
      return <input ref={inputRef} />;
    });
    
    // Usage in a parent component:
    const ParentComponent = () => {
      const inputRef = useRef(null);
    
      const handleClick = () => {
        inputRef.current.focus();
      };
    
      return (
        <div>
          <CustomInput ref={inputRef} />
          <button onClick={handleClick}>Focus Input</button>
        </div>
      );
    };

useDebugValue:

  • useDebugValue is a custom hook that can be used to display a label for custom hooks in React DevTools.
  • It can be helpful for debugging and inspecting custom hooks.

    • Example:

      import { useDebugValue } from "react";
      
      const useCustomHook = () => {
        // Custom hook logic...
      
        useDebugValue("Custom Hook Label");
      };

useErrorBoundary:

  • useErrorBoundary is a hook for creating error boundaries within functional components.
  • It allows you to catch and handle errors within a component tree.

    • Example:

      import React, { useErrorBoundary } from "react";
      
      const ErrorBoundaryComponent = ({ children }) => {
        const [error, resetErrorBoundary] = useErrorBoundary();
      
        if (error) {
          // Render an error component or fallback UI
          return (
            <div>
              <p>An error occurred.</p>
              <button onClick={resetErrorBoundary}>Try again</button>
            </div>
          );
        }
      
        return children;
      };

useTransition:

  • useTransition is a hook for managing and coordinating transitions and animations.
  • It allows you to batch multiple state updates and defer rendering updates until after a certain time.

    • Example:

      import React, { useState, useTransition } from "react";
      
      const AnimatedText = () => {
        const [text, setText] = useState("");
        const [startTransition, isPending] = useTransition();
      
        const handleClick = () => {
          startTransition(() => {
            setText("New text");
          });
        };
      
        return (
          <div>
            {isPending ? "Loading..." : text}
            <button onClick={handleClick}>Load Text</button>
          </div>
        );
      };

useDeferredValue:

- useDeferredValue is a hook that allows you to defer the update of a value until after a certain time.
- It can be useful for optimizing performance in specific scenarios.
- Example:
  ```jsx
  import React, { useState, useDeferredValue } from 'react';

  const DeferredValueExample = () => {
    const [value, setValue] = useState('');

    const deferredValue = useDeferredValue(value, { timeoutMs: 1000 });

    const handleChange = (event) => {
      setValue(event.target.value);
    };

    return (
      <div>
        <input value={value} onChange={handleChange} />
        <p>Deferred Value: {deferredValue}</p>
      </div>
    );
  };
  ```

useOpaqueIdentifier:

- useOpaqueIdentifier is a hook that generates a unique identifier for a component instance.
- It can be used as a key in lists to improve rendering performance.
- Example:
  ```jsx
  import React, { useOpaqueIdentifier } from 'react';

  const ListItem = ({ item }) => {
    const id = useOpaqueIdentifier();

    return <div key={id}>{item}</div>;
  };
  ```

useTransitionEffect:

  • useTransitionEffect is a combination of useEffect and useTransition.
  • It allows you to create transitions that occur over a certain period of time.

    • Example:

      import React, { useState, useTransitionEffect } from "react";
      
      const FadeInOutComponent = () => {
        const [show, setShow] = useState(false);
        const [startTransition, isPending] = useTransition();
      
        useTransitionEffect(() => {
          if (show) {
            startTransition(() => {
              // Perform fade-in animation
            });
          } else {
            startTransition(() => {
              // Perform fade-out animation
            });
          }
        }, [show]);
      
        const handleClick = () => {
          setShow((prevShow) => !prevShow);
        };
      
        return (
          <div>
            {isPending ? "Animating..." : show ? "Visible" : "Hidden"}
            <button onClick={handleClick}>Toggle Visibility</button>
          </div>
        );
      };