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

Question

Considering below hooks example      import   useState   from  react       function Example            const  count  setCount    useState 0           return               lt div gt                  lt p gt You clicked  count  times lt  p gt                  lt button onClick       gt  setCount count   1   gt                    Click me                 lt  button gt             lt  div gt                      Basically we use this forceUpdate   method to force the component to re-render immediately in React class components like below example       class Test extends Component          constructor props                super props                this state                      count 0                   count2  100                             this setCount   this setCount bind this    how can I do this with hooks in functional component                    setCount                  let count   this state count                     count   count 1                let count2   this state count2                     count2   count2 1                this setState  count                  this forceUpdate                    before below setState the component will re-render immediately when this forceUpdate   is called               this setState  count2  count                    render                  return   lt div gt                      lt span gt Count   this state count  gt  lt  span gt                        lt button onClick  this setCount  gt  lt  button gt                    lt  div gt                 But my query is How can I force above functional component to re-render immediately with hooks

User · Answer

You can  ab use normal hooks to force a rerender by taking advantage of the fact that React doesn t print booleans in JSX code     create a hook const  forceRerender  setForceRerender    React useState true          put this line where you want to force a rerender setForceRerender  forceRerender          make sure that  forceRerender  is  visible  in your js code      forceRerender  will not actually be visible since booleans are    not printed  but updating its value will nonetheless force a    rerender  return      lt div gt  forceRerender  lt  div gt

User · Answer

You can simply define the useState like that   const    forceUpdate    React useState 0     And usage  forceUpdate n   gt   n   Hope this help

User · Answer

react-tidy has a custom hook just for doing that called useRefresh  import React from  react  import  useRefresh  from  react-tidy   function App       const refresh   useRefresh     return        lt p gt        The time is  new Date     lt button onClick  refresh  gt Refresh lt  button gt       lt  p gt         Learn more about this hook Disclaimer I am the writer of this library

User · Answer

Generally  you can use any state handling approach you want to trigger an update   With TypeScript  codesandbox example  useState  const forceUpdate       gt  void   React useState   1  bind null          see NOTE below   useReducer  const forceUpdate   React useReducer      gt            1  as      gt  void   as custom hook  Just wrap whatever approach you prefer like this  function useForceUpdate         gt  void     return React useReducer      gt            1  as      gt  void     lt - paste here       How this works    To trigger an update  means to tell React engine that some value has changed and that it should rerender your component        setState  from useState   requires a parameter  We get rid of it by binding a fresh object          gt       in useReducer is a dummy reducer that returns a fresh object each time an action is dispatched      fresh object  is required so that it triggers an update by changing a reference in the state   PS  useState just wraps useReducer internally  source  NOTE  Using  bind with useState causes a change in function reference between renders  It is possible to wrap it inside useCallback as already explained here  but then it wouldn t be a sexy one-liner     The Reducer version already keeps reference equality between renders  This is important if you want to pass the forceUpdate function in props   plain JS  const forceUpdate   React useState   1  bind null          see NOTE above const forceUpdate   React useReducer      gt        1

User · Answer

Simple code  const forceUpdate   React useReducer bool   gt   bool  1     Use   forceUpdate

User · Answer

For regular React Class based components  refer to React Docs for the forceUpdate api at this URL  The docs mention that      Normally you should try to avoid all uses of forceUpdate   and only   read from this props and this state in render     However  it is also mentioned in the docs that      If your render   method depends on some other data  you can tell React   that the component needs re-rendering by calling forceUpdate      So  although use cases for using forceUpdate might be rare  and I have not used it ever  however I have seen it used by other developers in some legacy corporate projects that I have worked on   So  for the equivalent functionality for Functional Components  refer to the React Docs for HOOKS at this URL  Per the above URL  one can use the  useReducer  hook to provide a forceUpdate functionality for Functional Components    A working code sample that does not use state or props is provided below  which is also available on CodeSandbox at this URL  import React    useReducer  useRef   from  react   import ReactDOM from  react-dom    import    styles css    function App          Use the useRef hook to store a mutable value inside a functional component for the counter   let countref   useRef 0      const    forceUpdate    useReducer x   gt  x   1  0      function handleClick         countref current        console log  Count      countref current       forceUpdate       If you comment this out  the date and count in the screen will not be updated        return        lt div className  App  gt         lt h1 gt   new Date   toLocaleString     lt  h1 gt         lt h2 gt You clicked  countref current  times lt  h2 gt         lt button         onClick       gt              handleClick                      gt          ClickToUpdateDateAndCount        lt  button gt       lt  div gt          const rootElement   document getElementById  root    ReactDOM render  lt App   gt   rootElement     NOTE  An alternate approach using the useState hook  instead of useReducer  is also available at this URL

User · Answer

This will render depending components 3 times  arrays with equal elements aren t equal    const  msg  setMsg    useState        setMsg   test    setMsg   test    setMsg   test

User · Answer

This is possible with useState or useReducer  since useState uses useReducer internally  const    updateState    React useState    const forceUpdate   React useCallback      gt  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   lt     gt  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     gt     count  count   1        this setState   count2     gt     count2  count   1        this setState   count     gt     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      gt         setState   count     gt     count  count   1           setState   count2     gt     count2  count   1           setState   count     gt     count2  count   1

User · Answer

You should preferably only have your component depend on state and props and it will work as expected  but if you really need a function to force the component to re-render  you could use the useState hook and call the function when needed   Example   x000D   x000D  const   useState  useEffect     React  x000D   x000D  function Foo     x000D    const    forceUpdate    useState    x000D   x000D    useEffect      gt    x000D      setTimeout forceUpdate  2000   x000D            x000D   x000D    return  lt div gt  Date now    lt  div gt   x000D    x000D   x000D  ReactDOM render  lt Foo   gt   document getElementById  root     x000D   lt script src  https   unpkg com react 16 7 0-alpha 0 umd react production min js  gt  lt  script gt  x000D   lt script src  https   unpkg com react-dom 16 7 0-alpha 0 umd react-dom production min js  gt  lt  script gt  x000D   x000D   lt div id  root  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Alternative to  MinhKha s answer   It can be much cleaner with useReducer   const    forceUpdate    useReducer x   gt  x   1  0     Usage  forceUpdate   - cleaner without params

User · Answer

React Hooks FAQ official solution for forceUpdate  const     forceUpdate    useReducer  x    gt  x   1  0      usage  lt button onClick  forceUpdate  gt Force update lt  button gt   Working example  x000D   x000D  const App        gt      const     forceUpdate    useReducer  x    gt  x   1  0      return        lt div gt         lt button onClick  forceUpdate  gt Force update lt  button gt         lt p gt Forced update     times lt  p gt       lt  div gt           ReactDOM render  lt App   gt   document getElementById  root     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 10 1 umd react production min js  integrity  sha256-vMEjoeSlzpWvres5mDlxmSKxx6jAmDNY4zCt712YCI0   crossorigin  anonymous  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 10 1 umd react-dom production min js  integrity  sha256-QQt6MpTdAD0DiPLhqhzVyPs1flIdstR4 R7x4GqCvZ4   crossorigin  anonymous  gt  lt  script gt   lt script gt var useReducer   React useReducer lt  script gt   lt div id  root  gt  lt  div gt  x000D   x000D   x000D

User · Answer

One line solution  const useForceUpdate        gt  useState   1   useState returns a pair of values  the current state and a function that updates it - state and setter  here we are using only the setter in order to force re-render

User · Answer

Solution in one single line   const   forceRender    useReducer  s    gt  s 1  0    You can learn about useReducer here  https   reactjs org docs hooks-reference html usereducer

User · Answer

My variation of forceUpdate is not via a counter but rather via an object      Emulates  forceUpdate    const  unusedState  setUnusedState    useState   const forceUpdate   useCallback      gt  setUnusedState            Because           every time

User · Answer

As the others have mentioned  useState works - here is how mobx-react-lite implements updates - you could do something similar   Define a new hook  useForceUpdate -  import   useState  useCallback   from  react   export function useForceUpdate       const    setTick    useState 0     const update   useCallback      gt        setTick tick   gt  tick   1              return update      and use it in a component -   const forceUpdate   useForceUpdate    if           forceUpdate       force re-render     See https   github com mobxjs mobx-react-lite blob master src utils ts and https   github com mobxjs mobx-react-lite blob master src useObserver ts

User · Answer

Potential option is to force update only on specific component using key  Updating the key trigger a rendering of the component  which failed to update before   For example   const  tableKey  setTableKey    useState 1        useEffect      gt                setTableKey tableKey   1       tableData          lt DataTable     key  tableKey      data  tableData   gt

[javascript] How can I force component to re-render with hooks in React?

Examples related to javascript

Examples related to reactjs

Examples related to react-native

Examples related to react-hooks