React - How to force a function component to render

Question

I have a function component  and I want to force it to re-render    How can I do so  Since there s no instance this  I cannot call this forceUpdate

User · Answer

Disclaimer  NOT AN ANSWER TO THE PROBLEM   Leaving an Important note here   If you are trying to forceupdate a stateless component  chances are there is something wrong with your design   Consider the following cases    Pass a setter  setState  to a child component that can change state and cause the parent component to re-render  Consider lifting state up Consider putting that state in your Redux store  that can automatically force a re-render on connected components

User · Answer

None of these gave me a satisfactory answer so in the end I got what I wanted with the key prop  useRef and some random id generator like shortid  Basically  I wanted some chat application to play itself out the first time someone opens the app  So  I needed full control over when and what the answers are updated with the ease of async await  Example code  function sleep ms        return new Promise resolve   gt  setTimeout resolve  ms              your JSX functional component  import shortid somewhere  const  render  rerender    useState shortid generate     const messageList   useRef       new Message  id  1  message   quot Hi  let s get started  quot        useEffect     gt       await sleep 500      messageList current push new Message  id  1  message   quot What s your name  quot                more stuff        now trigger the update     rerender shortid generate               only the component with the right render key will update itself  the others will stay as is and won t rerender  return  lt div key  render  gt  messageList current  lt  div gt    In fact this also allowed me to roll something like a chat message with a rolling   const waitChat   async  ms    gt        let text    quot   quot      for  let i   0  i  lt  ms  i    200            if  messageList current messageList current length - 1  id     100                messageList current   messageList current filter   id     gt  id     100                    messageList current push new Message               id  100              message  text                     if  text length     3                text    quot   quot            else               text     quot   quot                    rerender shortid generate            await sleep 200            if  messageList current messageList current length - 1  id     100            messageList current   messageList current filter   id     gt  id     100

User · Answer

You can now  using React hooks Using react hooks  you can now call useState   in your function component  useState   will return an array of 2 things   A value  representing the current state  Its setter  Use it to update the value   Updating the value by its setter will force your function component to re-render  just like forceUpdate does  import React    useState   from  react      create your forceUpdate hook function useForceUpdate        const  value  setValue    useState 0      integer state     return      gt  setValue value   gt  value   1      update the state to force render    function MyComponent            call your hook here     const forceUpdate   useForceUpdate             return            lt div gt                 Clicking on the button will force to re-render like force update does                  lt button onClick  forceUpdate  gt                  Click to re-render              lt  button gt           lt  div gt            You can find a demo here  The component above uses a custom hook function  useForceUpdate  which uses the react state hook useState  It increments the component s state s value and thus tells React to re-render the component  EDIT In an old version of this answer  the snippet used a boolean value  and toggled it in forceUpdate    Now that I ve edited my answer  the snippet use a number rather than a boolean  Why    you would ask me  Because once it happened to me that my forceUpdate   was called twice subsequently from 2 different events  and thus it was reseting the boolean value at its original state  and the component never rendered  This is because in the useState s setter  setValue here   React compare the previous state with the new one  and render only if the state is different

User · Answer

I used a third party library called  use-force-update to force render my react functional components  Worked like charm  Just use import the package in your project and use like this   import useForceUpdate from  use-force-update    const MyButton        gt       const forceUpdate   useForceUpdate       const handleClick        gt        alert  I will re-render now         forceUpdate            return  lt button onClick  handleClick    gt

User · Answer

Official FAQ   https   reactjs org docs hooks-faq html is-there-something-like-forceupdate   now recommends this way if you really need to do it     const  ignored  forceUpdate    useReducer x   gt  x   1  0      function handleClick         forceUpdate

User · Answer

This can be done without explicitly using hooks provided you add a prop to your component and a state to the stateless component s parent component   const ParentComponent   props   gt      const  updateNow  setUpdateNow    useState true     const updateFunc        gt        setUpdateNow  updateNow         const MyComponent   props   gt        return   lt div gt        lt  div gt          const MyButtonComponent   props   gt        return   lt div gt   lt input type  button  onClick  props updateFunc    gt       lt  div gt          return        lt div gt          lt MyComponent updateMe  updateNow    gt         lt MyButtonComponent updateFunc  updateFunc   gt       lt  div gt

User · Answer

The accepted answer is good  Just to make it easier to understand  Example component  export default function MyComponent props         const  updateView  setUpdateView    useState 0        return            lt  gt               lt span style    display   quot none quot     gt  updateView  lt  span gt           lt   gt            To force re-rendering call the code below  setUpdateView  updateView    gt    updateView

User · Answer

Update react v16 8  16 Feb 2019 realease   Since react 16 8 released with hooks  function components are now have the ability to hold persistent state  With that ability you can now mimic a forceUpdate      x000D   x000D  function App     x000D    const    updateState    React useState    x000D    const forceUpdate   React useCallback      gt  updateState           x000D    console log  render    x000D    return   x000D       lt div gt  x000D         lt button onClick  forceUpdate  gt Force Render lt  button gt  x000D       lt  div gt  x000D       x000D    x000D   x000D  const rootElement   document getElementById  root    x000D  ReactDOM render  lt App   gt   rootElement   x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 8 1 umd react production min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 8 1 umd react-dom production min js  gt  lt  script gt  x000D   lt div id  root   gt  x000D   x000D   x000D    Note that this approach should be re-considered and in most cases when you need to force an update you probably doing something wrong     Before react 16 8 0  No you can t  State-Less function components are just normal functions that returns jsx  you don t have any access to the React life cycle methods as you are not extending from the React Component   Think of function-component as the render method part of the class components

[javascript] React - How to force a function component to render?

Examples related to javascript

Examples related to reactjs