- Technicalpig
- Posts
- TechnicalPig🐷: useMemo, useState and useEffect
TechnicalPig🐷: useMemo, useState and useEffect
What are they and when to use them
Technical Pig
February 26, 2024
useState, useMemo, and useEffect are hooks in React that serve different purposes in managing state and side effects in functional components.
useState
useState is a hook used to add state to functional components. useState allows you to track state in a functional component and update it as needed. It returns an array containing the current state value and a function to update it.
Use case: Whenever you need to hold and set simple values or objects that will cause the component to re-render when they change, use useState.
useMemo
useMemo is a hook used to memoize expensive calculations so that these calculations are not re-executed every time the component re-renders. It takes a function and a list of dependencies. useMemo will only recompute the memoized value when one of the dependencies has changed. It's used to optimise performance.
Use case: Use useMemo for expensive calculations that you don't want to run on every render. However, remember it's an optimisation tool, and overuse can lead to more complex code and even degrade performance if misused.
useEffect
useEffect is used to perform side effects in functional components. It can be used for data fetching, subscriptions, or manually changing the DOM from React components. It takes a function and an optional array of dependencies. React runs the effects after flushing changes to the DOM. If the dependencies array is provided, React will only re-run the side effects if one of the dependencies has changed.
Use case: useEffect is useful for operations that need to happen after render, like API calls, subscriptions, or manually altering the DOM. It helps in managing side effects that are not directly related to the component's output.
When to use useEffect vs. useMemo
Superficially, it might seem that they serve the same purpose since both useEffect and useMemo will only execute if their dependencies change. However, they serve different purposes and it is important to understand these differences to utilise them effectively in your app.
useEffect | useMemo | |
|---|---|---|
Purpose | Used for side effects in functional components. Side effects are operations that affect other components or the outside world, such as fetching data, directly manipulating the DOM etc. The | Used to memoize expensive calculations. This hook returns a memoized value, meaning React will only recompute the memoized value when one of the dependencies has changed. Unlike |
Usage | Ideal for operations that don't produce a value or directly interact with the rendering but need to be executed in response to component rendering or state/prop changes. | Ideal for optimizing performance by avoiding expensive calculations on each render. |
Timing | Executes after the DOM has been updated. | Executes during rendering, before the DOM has been updated. |
Example | Fetching data from an API, setting up a subscription, or manually changing the DOM in response to prop or state changes. | Computing a derived value or performing an expensive calculation that should not be done on every render unless specific inputs have changed. |
Key Differences
Purpose:
useEffectis for side effects outside of the rendering process, whileuseMemois for memoizing expensive calculations to enhance performance.Execution Timing:
useEffectruns after the DOM has been updated, whileuseMemoruns during rendering.Return Value:
useEffectdoes not return a value (it returns a cleanup function optionally), whereasuseMemoreturns a memoized value.
In summary, choose useEffect for side effects and interactions with the external world, and useMemo for optimizing performance by memoizing expensive computations based on dependencies.