Lazy initial state – What it is and how to use it?

by

The value passed to the useState hook in the initial render is the initial state value, and gets disregarded in subsequent renders. This initial value can be the result of calling a function as in the following situation:

const Component = () => {
  const [state, setState] = useState(getInitialHundredItems())
}

But note that getInitialHundredItems is unconditionally and needlessly called on each render cycle.

For use cases like this instead of just calling a function that returns a value you can pass a function which returns the initial state. This function will only be executed once (initial render) and not on each render like the above code will. See Lazy Initial State for details.

const Component = () =>{
  const [state, setState] = useState(getInitialHundredItems)
}

More Related Contents:

  1. How to use `setState` callback on react hooks
  2. How to fix missing dependency warning when using useEffect React Hook
  3. How to compare oldValues and newValues on React Hooks useEffect?
  4. Does React batch state update functions when using hooks?
  5. React-hooks. Can’t perform a React state update on an unmounted component
  6. How to use callback with useState hook in react [duplicate]
  7. Understanding the React Hooks ‘exhaustive-deps’ lint rule
  8. With useEffect, how can I skip applying an effect upon the initial render?
  9. How to use throttle or debounce with React Hook?
  10. React Hook : Send data from child to parent component
  11. React hooks useEffect only on update?
  12. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  13. Set types on useState React Hook with TypeScript
  14. Stop useEffect from running on mount
  15. How to sync props to state using React hooks : setState()
  16. React Hooks: useEffect() is called twice even if an empty array is used as an argument
  17. React Hook “useState” is called in function “app” which is neither a React function component or a custom React Hook function
  18. React: useState or useRef?
  19. React Hooks: how to wait for the data to be fetched before rendering
  20. Does a render happen before function in React Hooks useEffect is called?
  21. React Hooks – Modified state not reflecting immediately
  22. React Hooks – Modified state not reflecting immediately
  23. React Hooks: Why is .current null for useRef Hook?
  24. How to test a react component that is dependent on useContext hook?
  25. What is the expected return of `useEffect` used for?
  26. ReactJS – prevState in the new useState React hook?
  27. Property ‘value’ does not exist on type ‘never’. when use useRef hook in mui
  28. How to create dynamic refs in functional component- Using useRef Hook
  29. Put A Warning If Page Refresh in ReactJS
  30. React – Is useState ‘s setter function able to change?

Leave a Comment