Can you force a React component to rerender without calling setState

Question

I have an external  to the component   observable object that I want to listen for changes on  When the object is updated it emits change events  and then I want to rerender the component when any change is detected     With a top-level React render this has been possible  but within a component it doesn t work  which makes some sense since the render method just returns an object      Here s a code example     export default class MyComponent extends React Component        handleButtonClick          this render              render          return           lt div gt            Math random              lt button onClick  this handleButtonClick bind this   gt             Click me           lt  button gt          lt  div gt                      Clicking the button internally calls this render    but that s not what actually causes the rendering to happen  you can see this in action because the text created by  Math random    doesn t change   However  if I simply call this setState   instead of this render    it works fine     So I guess my question is  do React components need to have state in order to rerender  Is there a way to force the component to update on demand without changing the state

User · Answer

Just another reply to back-up the accepted answer :-)

React discourages the use of forceUpdate() because they generally have a very "this is the only way of doing it" approach toward functional programming. This is fine in many cases, but many React developers come with an OO-background, and with that approach, it's perfectly OK to listen to an observable object.

And if you do, you probably know you MUST re-render when the observable "fires", and as so, you SHOULD use forceUpdate() and it's actually a plus that shouldComponentUpdate() is NOT involved here.

Tools like MobX, that takes an OO-approach, is actually doing this underneath the surface (actually MobX calls render() directly)

User · Answer

I have found it best to avoid forceUpdate    One way to force re-render is to add dependency of render   on a temporary external variable and change the value of that variable as and when needed    Here s a code example   class Example extends Component     constructor props         this state    temp 0          this forceChange   this forceChange bind this            forceChange          this setState prevState   gt               temp  prevState temp                        render          return            lt div gt  this state temp  amp  amp                lt div gt                        add code here                   lt  div gt             lt  div gt                   Call this forceChange   when you need to force re-render

User · Answer

forceUpdate should be avoided because it deviates from a React mindset  The React docs cite an example of when forceUpdate might be used      By default  when your component s state or props change  your component will re-render  However  if these change implicitly  eg  data deep within an object changes without changing the object itself  or if your render   method depends on some other data  you can tell React that it needs to re-run render   by calling forceUpdate      However  I d like to propose the idea that even with deeply nested objects  forceUpdate is unnecessary  By using an immutable data source tracking changes becomes cheap  a change will always result in a new object so we only need to check if the reference to the object has changed  You can use the library Immutable JS to implement immutable data objects into your app      Normally you should try to avoid all uses of forceUpdate   and only read from this props and this state in render    This makes your component  pure  and your application much simpler and more efficient forceUpdate      Changing the key of the element you want re-rendered will work  Set the key prop on your element via state and then when you want to update set state to have a new key     lt Element key  this state key    gt     Then a change occurs and you reset the key  this setState   key  Math random         I want to note that this will replace the element that the key is changing on  An example of where this could be useful is when you have a file input field that you would like to reset after an image upload    While the true answer to the OP s question would be forceUpdate   I have found this solution helpful in different situations  I also want to note that if you find yourself using forceUpdate you may want to review your code and see if there is another way to do things   NOTE 1-9-2019    The above  changing the key  will completely replace the element  If you find yourself updating the key to make changes happen you probably have an issue somewhere else in your code  Using Math random   in key will re-create the element with each render  I would NOT recommend updating the key like this as react uses the key to determine the best way to re-render things

User · Answer

forceUpdate    but every time I ve ever heard someone talk about it  it s been followed up with you should never use this

User · Answer

Another way is calling setState  AND preserve state    this setState prevState  gt      prevState

User · Answer

We can use this forceUpdate   as below          class MyComponent extends React Component            handleButtonClick       gt             this forceUpdate              render         return         lt div gt         Math random             lt button  onClick  this handleButtonClick  gt          Click me          lt  button gt        lt  div gt                ReactDOM render  lt MyComponent   gt    mountNode     The Element  Math random  part in the DOM only gets updated even if you use the setState to re-render the component   All the answers here are correct supplementing the question for understanding  as we know to re-render a component with out using setState     is by  using the forceUpdate     The above code runs with setState as below    class MyComponent extends React Component                   handleButtonClick       gt                   this setState                                 render              return      lt div gt       Math random         lt button  onClick  this handleButtonClick  gt        Click me      lt  button gt     lt  div gt            ReactDOM render  lt MyComponent   gt    mountNode

User · Answer

ES6 - I am including an example  which was helpful for me   In a  short if statement  you can pass empty function like this   isReady       gt      onClick   This seems to be the shortest approach       gt

User · Answer

You could do it a couple of ways   1  Use the forceUpdate   method   There are some glitches that may happen when using the forceUpdate   method  One example is that it ignores the shouldComponentUpdate   method and will re-render the view regardless of whether shouldComponentUpdate   returns false  Because of this using forceUpdate   should be avoided when at all possible   2  Passing this state to the setState   method  The following line of code overcomes the problem with the previous example   this setState this state     Really all this is doing is overwriting the current state with the current state which triggers a re-rendering  This still isn t necessarily the best way to do things  but it does overcome some of the glitches you might encounter using the forceUpdate   method

User · Answer

use hooks or HOC take your pick  Using hooks or the HOC  higher order component  pattern  you can have automatic updates when your stores change  This is a very light-weight approach without a framework   useStore Hooks way to handle store updates  interface ISimpleStore     on   ev  string  fn       gt  void    gt  void    off   ev  string  fn       gt  void    gt  void     export default function useStore lt T extends ISimpleStore gt  store  T      const  storeState  setStoreState    useState  store      useEffect      gt        const onChange        gt          setStoreState  store              store on  change   onChange       return      gt          store off  change   onChange                     return storeState store       withStores HOC handle store updates  export default function     stores  SimpleStore        return function  WrappedComponent  React ComponentType lt any gt         return class WithStore extends PureComponent lt      lastUpdated  number  gt          constructor props  React ComponentProps lt any gt             super props           this state               lastUpdated  Date now                       this stores   stores                 private stores   SimpleStore           private onChange        gt            this setState  lastUpdated  Date now                      componentDidMount        gt            this stores  amp  amp            this stores forEach  store    gt                   each store has a common change event to subscribe to             store on  change   this onChange                                 componentWillUnmount        gt            this stores  amp  amp            this stores forEach  store    gt                store off  change   this onChange                                 render             return              lt WrappedComponent             lastUpdated  this state lastUpdated                  this props              gt                                     SimpleStore class  import AsyncStorage from   react-native-community async-storage   import ee   Emitter  from  event-emitter    interface SimpleStoreArgs     key   string    defaultState     key  string   any      export default class SimpleStore     constructor  key  defaultState   SimpleStoreArgs        if  key          this key   key           hydrate here if you want w  localState or AsyncStorage           if  defaultState          this  state       defaultState  loaded  false         else         this  state    loaded  true               protected key  string         protected  state    key  string   any          protected eventEmitter  Emitter   ee        public setState newState    key  string   any         this  state       this  state     newState       this eventEmitter emit  change        if  this key             store on client w  localState or AsyncStorage             public get state         return this  state        public on ev  string  fn      gt  void        this eventEmitter on ev  fn         public off ev  string  fn      gt  void        this eventEmitter off ev  fn         public get loaded    boolean       return   this  state loaded          How to Use  In the case of hooks      use inside function like so const someState   useStore myStore   someState myProp    something     In the case of HOC      inside your code get set your store and stuff just updates const val   myStore myProp  myOtherStore myProp    something        return your wrapped component like so export default withStores myStore  MyComponent     MAKE SURE To export your stores as a singleton to get the benefit of global change like so   class MyStore extends SimpleStore     public get someProp         return this  state someProp              public set someProp value  string        this setState     this  state  someProp  value             this is a singleton const myStore   new MyStore    export  myStore     This approach is pretty simple and works for me  I also work in large teams and use Redux and MobX and find those to be good as well but just a lot of boilerplate  I just personally like my own approach because I always hated a lot of code for something that can be simple when you need it to be

User · Answer

So I guess my question is  do React components need to have state in   order to rerender  Is there a way to force the component to update on   demand without changing the state    The other answers have tried to illustrate how you could  but the point is that you shouldn t  Even the hacky solution of changing the key misses the point  The power of React is giving up control of manually managing when something should render  and instead just concerning yourself with how something should map on inputs  Then supply stream of inputs   If you need to manually force re-render  you re almost certainly not doing something right

User · Answer

When you want two React components to communicate  which are not bound by a relationship  parent-child   it is advisable to use Flux or similar architectures    What you want to do is to listen for changes of the observable component store  which holds the model and its interface  and saving the data that causes the render to change as state in MyComponent  When the store pushes the new data  you change the state of your component  which automatically triggers the render   Normally you should try to avoid using forceUpdate     From the documentation      Normally you should try to avoid all uses of forceUpdate   and only read from this props and this state in render    This makes your application much simpler and more efficient

User · Answer

Actually  forceUpdate   is the only correct solution as setState   might not trigger a re-render if additional logic is implemented in shouldComponentUpdate   or when it simply returns false   forceUpdate       Calling forceUpdate   will cause render   to be called on the component  skipping shouldComponentUpdate    more      setState       setState   will always trigger a re-render unless conditional rendering logic is implemented in shouldComponentUpdate    more       forceUpdate   can be called from within your component by this forceUpdate      Hooks  How can I force component to re-render with hooks in React     BTW  Are you mutating state or your nested properties don t propagate    How to update nested state properties in React Sandbox

User · Answer

In order to accomplish what you are describing please try this forceUpdate

User · Answer

You can use forceUpdate   for more details check  forceUpdate

User · Answer

I Avoided forceUpdate by doing following     WRONG WAY   do not use index as key   this state rows map  item  index    gt      lt MyComponent cell  item  key  index    gt         CORRECT WAY   Use data id as key  it can be some guid etc   this state rows map  item    gt      lt MyComponent item  item  key  item id    gt      so by doing such code improvement your component will be UNIQUE and render naturally

User · Answer

For completeness  you can also achieve this in functional components   const    updateState    useState    const forceUpdate   useCallback      gt  updateState                  forceUpdate      Or  as a reusable hook   const useForceUpdate        gt      const    updateState    useState      return useCallback      gt  updateState                const forceUpdate   useForceUpdate      See  https   stackoverflow com a 53215514 2692307  Please note that using a force-update mechanism is still bad practice as it goes against the react mentality  so it should still be avoided if possible

User · Answer

forceUpdate    method will work but it is advisable to use setState

User · Answer

In your component  you can call this forceUpdate   to force a rerender     Documentation  https   facebook github io react docs component-api html

User · Answer

There are a few ways to rerender your component   The simplest solution is to use forceUpdate   method   this forceUpdate     One more solution is to create not used key in the state nonUsedKey   and call setState function with update of this nonUsedKey   this setState   nonUsedKey  Date now          Or rewrite all current state   this setState this state     Props changing also provides component rerender

[reactjs] Can you force a React component to rerender without calling setState?

Examples related to reactjs

Examples related to react-jsx

Examples related to higher-order-components