How can I force a component to re-render with hooks in React?

by

This is possible with useState or useReducer, since useState uses useReducer internally:

const [, updateState] = React.useState();
const forceUpdate = React.useCallback(() => updateState({}), []);

forceUpdate isn’t intended to be used under normal circumstances, only in testing or other outstanding cases. This situation may be addressed in a more conventional way.

setCount is an example of improperly used forceUpdate, setState is asynchronous for performance reasons and shouldn’t be forced to be synchronous just because state updates weren’t performed correctly. If a state relies on previously set state, this should be done with updater function,

If you need to set the state based on the previous state, read about the updater argument below.

<…>

Both state and props received by the updater function are guaranteed
to be up-to-date. The output of the updater is shallowly merged with
state.

setCount may not be an illustrative example because its purpose is unclear but this is the case for updater function:

setCount(){
  this.setState(({count}) => ({ count: count + 1 }));
  this.setState(({count2}) => ({ count2: count + 1 }));
  this.setState(({count}) => ({ count2: count + 1 }));
}

This is translated 1:1 to hooks, with the exception that functions that are used as callbacks should better be memoized:

   const [state, setState] = useState({ count: 0, count2: 100 });

   const setCount = useCallback(() => {
     setState(({count}) => ({ count: count + 1 }));
     setState(({count2}) => ({ count2: count + 1 }));
     setState(({count}) => ({ count2: count + 1 }));
   }, []);

More Related Contents:

  1. Where can I make API call with hooks in react?
  2. How to register event with useEffect hooks?
  3. How to prevent re-rendering of components that have not changed?
  4. What is useState() in React?
  5. Do we still need functional setState way in react hooks?
  6. What is component in reactjs?
  7. React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing
  8. How can I use multiple refs for an array of elements with hooks?
  9. How can I use React hooks in React classic `class` component?
  10. Invalid hook call. Hooks can only be called inside of the body of a function component
  11. Can I set state inside a useEffect hook
  12. How to call an async function inside a UseEffect() in React?
  13. Why is useState not triggering re-render?
  14. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  15. React Function Components with hooks vs Class Components
  16. React hooks: accessing up-to-date state from within a callback
  17. React Hooks – What’s happening under the hood?
  18. React.createClass vs. ES6 arrow function
  19. Is it an anti-pattern to define a function component inside the render() function?
  20. setTimeout for this.state vs useState
  21. unable to scroll in scrollView
  22. How to clear react-native cache?
  23. Next.js context provider wrapping App component with page specific layout component giving undefined data
  24. React hooks: call component as function vs render as element
  25. React hooks useState setValue still rerender one more time when value is equal
  26. How can I dispatch function in redux?
  27. TypeError dispatcher.useState is not a function when using React Hooks
  28. React native – objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store})
  29. useState hook, setState function. Accessing previous state value
  30. React-native view auto width by text inside

Leave a Comment