DEV Community

Paulund
Paulund

Posted on • Originally published at paulund.co.uk

React Hooks

#react #webdev #javascript

useState

The useState hook is used to add state to a function component. This hook must be called from inside a component or another hook.

import { useState } from 'react';

const [state, setState] = useState(initialState);
Enter fullscreen mode Exit fullscreen mode

The useState hook returns an array with two values. The first value is the current state and the second value is a function that you can use to update the state. The initialState is the initial value of the state.

This hook should be used when you want to add state to a function component. For example if you want to add a counter to a component you can use the useState hook.

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

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

If you want to add a form to a component you can use the useState hook to store the form values.

function Form() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  return (
    <form>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
    </form>
  );
}
Enter fullscreen mode Exit fullscreen mode

If you want to add a toggle to a component you can use the useState hook to store the toggle value.

function Toggle() {
  const [isToggled, setIsToggled] = useState(false);

  return (
    <div>
      <h1>{isToggled ? 'ON' : 'OFF'}</h1>
      <button onClick={() => setIsToggled(!isToggled)}>Toggle</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

The useState hook can only be used on client side components. If you want to add state to a server side component you can use the useState hook in a custom hook and then use the custom hook in the server side component.

function useCounter() {
  const [count, setCount] = useState(0);
  return [count, setCount];
}
Enter fullscreen mode Exit fullscreen mode

useEffect

The useEffect hook is used to watch for external changes and run side effects. This hook must be called from inside a component or another hook.

import { useEffect } from 'react';

useEffect(() => {
  // Run side effect
  return () => {
    // Clean up
  };
}, [dependencies]);
Enter fullscreen mode Exit fullscreen mode

The first parameter is the side effect that you want to run and the second parameter is an array of dependencies. If any of the dependencies change the side effect will be re-run.

This hook should be used when you want to run side effects in function components. For example if you want to fetch data from an API when the component mounts you can use the useEffect hook.

function Profile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser(userId).then((data) => setUser(data));
  }, [userId]);

  return <h1>{user.name}</h1>;
}
Enter fullscreen mode Exit fullscreen mode

An external change is anything that is outside of react this can be another system or a browser API. For example if you want to display a message when users are offline you can use a browser API to check if the user is online.

function Status() {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  }, [friendID]);

  return isOnline;
}
Enter fullscreen mode Exit fullscreen mode

If you want to set a function on a timer you can use the useEffect hook to set the timer when the component mounts and clear the timer when the component unmounts.

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

  useEffect(() => {
    const id = setInterval(() => {
      setCount(count + 1);
    }, 1000);
    return () => clearInterval(id);
  }, [count]);

  return <h1>{count}</h1>;
}
Enter fullscreen mode Exit fullscreen mode

If you want to response to a window mouse event you would use useEffect to add the event listener when the component mounts and remove the event listener when the component unmounts.

function Mouse() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    function handleMouseMove(event) {
      setPosition({
        x: event.clientX,
        y: event.clientY,
      });
    }

    window.addEventListener('mousemove', handleMouseMove);
    return () => window.removeEventListener('mousemove', handleMouseMove);
  }, []);

  return <h1>{position.x}, {position.y}</h1>;
}
Enter fullscreen mode Exit fullscreen mode

useLayoutEffect

The useLayoutEffect hook is similar to the useEffect hook but it runs synchronously after the DOM has been updated. This hook must be called from inside a component or another hook.

import { useLayoutEffect } from 'react';

useLayoutEffect(() => {
  // Run side effect
  return () => {
    // Clean up
  };
}, [dependencies]);
Enter fullscreen mode Exit fullscreen mode

The first parameter is the side effect that you want to run and the second parameter is an array of dependencies. If any of the dependencies change the side effect will be re-run.

This hook should be used when you want to run side effects that need to be run synchronously after the DOM has been updated. For example if you want to measure the size of an element after it has been rendered you can use the useLayoutEffect hook.

function Measure() {
  const [height, setHeight] = useState(0);

  const measuredRef = useLayoutEffect((node) => {
    if (node !== null) {
      setHeight(node.getBoundingClientRect().height);
    }
  }, []);

  return (
    <div ref={measuredRef}>
      <h1>Height: {height}</h1>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

useContext

This useContext hook is used to read a context value from the nearest provider for the context. The useContext hook accepts a context object and returns the current context value for that context.

import { useContext } from 'react';

const value = useContext(MyContext);
Enter fullscreen mode Exit fullscreen mode

The MyContext is the the provider that you want to read the value from. The useContext hook will return the current context value for that context. If the context value changes then the component will re-render.
To create a provider you can define this on a component.

const MyContext = React.createContext(defaultValue);
Enter fullscreen mode Exit fullscreen mode

Then you can use the MyContext.Provider to provide the value to the children components.

<MyContext.Provider value={/* some value */}>
  <Child />
</MyContext.Provider>
Enter fullscreen mode Exit fullscreen mode

The useContext hook is useful when you want to avoid passing props through intermediate components. For example if you have a theme that you want to pass to multiple components you can use the useContext hook to avoid passing the theme prop to all the components.

const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
      <Footer />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div>Theme: {theme}</div>;
}

function Footer() {
  const theme = useContext(ThemeContext);
  return <div>Theme: {theme}</div>;
}
Enter fullscreen mode Exit fullscreen mode

This can be used at many levels of the component tree to avoid passing props through intermediate components all the way down the tree. Any child component of Toolbar or Footer will be able to access the ThemeContext value.

useReducer

The useReducer hook is used to manage complex state logic in a component. This hook must be called from inside a component or another hook.

import { 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:
            return state;
    }
};

const [state, dispatch] = useReducer(reducer, initialState);
Enter fullscreen mode Exit fullscreen mode

This should be used when you have complex state logic that involves multiple sub-values or when the next state depends on the previous state. For example if you have a counter that you want to increment or decrement you can use the useReducer hook like the example above.

function Counter() {
  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:
        return state;
    }
  };

  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <h1>{state.count}</h1>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

The reason why you would use this instead of useState directly is when the state logic is more complex. For example if you have a form that has multiple fields and you want to update the state based on the field that is being updated you can use the useReducer hook.

function Form() {
  const initialState = { name: '', email: '' };

  const reducer = (state, action) => {
    switch (action.type) {
      case 'CHANGE_NAME':
        return { ...state, name: action.payload };
      case 'CHANGE_EMAIL':
        return { ...state, email: action.payload };
      default:
        return state;
    }
  };

  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <form>
      <input
        type="text"
        value={state.name}
        onChange={(e) => dispatch({ type: 'CHANGE_NAME', payload: e.target.value })}
      />
      <input
        type="email"
        value={state.email}
        onChange={(e) => dispatch({ type: 'CHANGE_EMAIL', payload: e.target.value })}
      />
    </form>
  );
}
Enter fullscreen mode Exit fullscreen mode

useCallback

useCallback will let you cache a function so that it doesn't change between renders. This is useful when you want to pass a function to a child component that relies on the function not changing.

const memoizedCallback = useCallback(
    () => {doSomething(a, b);},
    [a, b]
);
Enter fullscreen mode Exit fullscreen mode

The first parameter is the function you want to memoize and the second parameter is an array of dependencies. If any of the dependencies change the function will be re-created.

This hook should be used when you want to optimize performance by avoiding unnecessary re-renders. For example if you have a component that takes a function as a prop and you don't want it to re-render when the parent component re-renders. This is when you will use the useCallback hook.

In this example

function ProductPage({ productId, referrer, theme }) {
  // ...
  return (
    <div className={theme}>
      <ShippingForm onSubmit={handleSubmit} />
    </div>
  );
Enter fullscreen mode Exit fullscreen mode

The ShippingForm takes a parameter of handleSubmit but it is nested inside a div which has a theme parameter, when theme is changed React will re-render the child components and therefore the handleSubmit function will be re-created. To avoid this you can use the useCallback hook.

function ProductPage({ productId, referrer, theme }) {
  const handleSubmit = useCallback(() => {
    // ...
  }, [productId, referrer]);

  return (
    <div className={theme}>
      <ShippingForm onSubmit={handleSubmit} />
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Now the handleSubmit function will only be re-created when productId or referrer change.

The useCallback hook is similar to the useMemo hook but it is used for functions instead of values. useMemo will cache the value of the function and useCallback will cache the function itself, avoiding the function to be rebuilt. Therefore you can achieve the samething by doing the following.

function useCallback(fn, deps) {
  return useMemo(() => fn, deps);
}
Enter fullscreen mode Exit fullscreen mode

If you are writing custom hooks then you can use the useCallback hook to memoize the function that you are returning.

function useHandleSubmit(productId, referrer) {
  return useCallback(() => {
    // ...
  }, [productId, referrer]);
}
Enter fullscreen mode Exit fullscreen mode

This will ensure that the consumer of the custom hook can optimize their own code when it's needed.

useMemo

The useMemo hook will let you cache the value of a function so that it doesn't change between renders. This is useful when you want to avoid recalculating the value of a function on every render.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
Enter fullscreen mode Exit fullscreen mode

The first parameter is the function you want to memoize and the second parameter is an array of dependencies. If any of the dependencies change the function will be re-calculated.

For example if you need to run a filter on your data and you don't want to re-run the filter on every render you can use the useMemo hook.

function ProductList({ products, filter }) {
  const filteredProducts = useMemo(() => products.filter(filter), [products, filter]);

  return (
    <ul>
      {filteredProducts.map((product) => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}
Enter fullscreen mode Exit fullscreen mode

useTransition

The useTransition hook allows you to update the state without blocking the UI from rendering

import { useTransition } from 'react';

const [isPending, startTransition] = useTransition();
Enter fullscreen mode Exit fullscreen mode

The useTransition hook returns an array with two values. The first value is a boolean that indicates if the transition is pending and the second value is a function that you can use to start the transition.

This hook should be used when you want to update the state without blocking the UI from rendering. For example if you have a list of items that you want to update and you don't want the UI to block while the items are being updated you can use the useTransition hook.

function List({ items }) {
  const [isPending, startTransition] = useTransition();
  const [newItems, setNewItems] = useState([]);

  const handleClick = () => {
    startTransition(() => {
      setNewItems([...items, 'new item']);
    });
  };

  return (
    <div>
      <ul>
        {items.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      {isPending && <p>Loading...</p>}
      <button onClick={handleClick}>Add Item</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

useDeferredValue

The useDeferredValue hook is used to defer the value of a resource like a promise. This hook must be called from inside a component or another hook.

import { useDeferredValue } from 'react';

function MessageComponent({ messagePromise }) {
  const deferredMessage = useDeferredValue(messagePromise);
  return <Message message={deferredMessage} />;
}
Enter fullscreen mode Exit fullscreen mode

This can be used when you need to defer the value to help improve the performance of the application. For example if you have a message that is being fetched from an API and you don't want to show the message until it has been fetched you can use the useDeferredValue hook.

A good example of using this is inside a <Suspense> component when you want to fetch a new value, it will mean you can continue to show the old value or the fallback until the new value is ready.

function MessageComponent({ messagePromise }) {
  const deferredMessage = useDeferredValue(messagePromise);
  return (
    <Suspense fallback={<Loading />}>
      <Message message={deferredMessage} />
    </Suspense>
  );
}
Enter fullscreen mode Exit fullscreen mode

useRef

The useRef hook is used to create a mutable object that persists for the lifetime of the component. This is useful when you want to store a reference to a DOM element or a value that doesn't change between renders.

import { useRef } from 'react';

const ref = useRef(initialValue);
Enter fullscreen mode Exit fullscreen mode

For example if you want to store a reference to a DOM element you can use the useRef hook.

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

useImperativeHandle

useImperativeHandle is a hook that allows you to customize the instance value that is exposed to parent components when using ref. This is useful when you want to expose a custom API to the parent component.

import { useImperativeHandle, forwardRef } from 'react';

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
  }));

  return <input ref={inputRef} />;
});
Enter fullscreen mode Exit fullscreen mode

This hook should be used when you want to expose a custom API to the parent component. For example if you have a custom input component that you want to expose a focus method to the parent component you can use the useImperativeHandle hook.

function App() {
  const inputRef = useRef();

  return (
    <div>
      <FancyInput ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focus</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

useId

useId is a hook that generates a unique id for a component. This is useful when you want to generate a unique id for a component that can be used in other components.

import { useId } from 'react';

function MyComponent() {
  const id = useId();
  return <div id={id}>Hello World</div>;
}
Enter fullscreen mode Exit fullscreen mode

useDebugValue

The useDebugValue will allow you to add a label to the React DevTools for custom hooks. This is useful when you want to provide more information about the custom hook to the developer.

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  // Show a label in DevTools next to this Hook
  // e.g. "FriendStatus: Online"
  useDebugValue(isOnline ? 'Online' : 'Offline');

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  }, [friendID]);

  return isOnline;
}
Enter fullscreen mode Exit fullscreen mode

useSyncExternalStore

The useSyncExternalStore hook is used to sync the state of a component with an external store. This hook must be called from inside a component or another hook.

import { useSyncExternalStore } from 'react';

function MessageComponent({ messagePromise }) {
  const [message, setMessage] = useState(null);
  useSyncExternalStore(messagePromise, setMessage);
  return <Message message={message} />;
}
Enter fullscreen mode Exit fullscreen mode

The external store will be something like a promise or a value that is being fetched from an API. For example if you have a message that is being fetched from an API and you want to sync the state of the component with the message you can use the useSyncExternalStore hook.

useOptimistic

The useOptimistic hook is used to update the UI optimistically before the server responds. This hook must be called from inside a component or another hook.

import { useOptimistic } from 'react';

function MessageComponent({ messagePromise }) {
  const [message, setMessage] = useState(null);
  const optimisticMessage = useOptimistic(messagePromise, setMessage);
  return <Message message={optimisticMessage} />;
}
Enter fullscreen mode Exit fullscreen mode

This function is useful when you want to update the UI optimistically before the server responds. For example if you have a message that is being sent to the server and you want to show the message before the server responds you can use the useOptimistic hook.

use

The use hook used to read a value of a resource like a promise. This hook must be called from inside a component or another hook.

import { use } from 'react';

function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  const theme = use(ThemeContext);
}
Enter fullscreen mode Exit fullscreen mode

Custom Hooks

There are a few ways to reuse functionality in React.

  • Reuse markup - use a component
  • Reuse vanilla JS logic - use a function
  • Reuse React logic - use a custom hook

Custom hooks are JavaScript functions that use React hooks. They can be used to share logic between components.

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}
Enter fullscreen mode Exit fullscreen mode

You can then use the custom hook in your components.

function App() {
  const { data, loading } = useFetch('https://api.example.com/data');

  if (loading) {
    return <div>Loading...</div>;
  }

  return <div>{data}</div>;
}
Enter fullscreen mode Exit fullscreen mode

Custom hooks can be used to encapsulate logic that is shared between components. They can be used to separate concerns and make your code more modular and reusable.

Further Reading

Top comments (1)

Collapse
 
gianmarioiamoni profile image
Gianmario Iamoni •

Great inspirational article. Good job!

Read next

garciadiazjaime profile image

React + AWS Cognito: Email Authentication Setup Guide (First Part)

Jaime -

digitaldrreamer profile image

Running a Function When an #await Block resolves in Svelte(Kit)

Abdullah Bashir -

dev007777 profile image

Python beats Javascript, Next.js Leap & the AI Coding Wars

TheDev -

mcsee profile image

Code Smell 279 - Loop Premature Optimization

Maxi Contieri -