[Question] How to force re-render a Component?
farooqkz opened this issue · comments
Hello. I have a Component whose state is an Array and I think upon updating this array, Inferno won't detect a state change and therefore won't render the component again. Any method to render the component myself? Am I headed towards the right way?
Did you change the whole component state object to be an array? That is not supported, you should instead have state as an object and have a property pointing to the array. Something like this:
this.state = { data: theArray };
Also to update the state it needs to go through this.setState method.
Yeah I do that. But Inferno won't detect change in an array. right? That's my problem. How about storing the array in this and number of elements in state? Do you think it's a good idea?
Yeah I do that. But Inferno won't detect change in an array. right?
I don't fully understand what you mean by detecting the change? Having state object as an array is not supported, it should be object with key value pairs where the value can be array.
As long as the render method of your component returns with a new set of elements Inferno will change the DOM accordingly
Have you checked that you don't have shouldComponentUpdate somewhere preventing the update?
Yeah I do that. But Inferno won't detect change in an array. right?
I don't fully understand what you mean by detecting the change? Having state object as an array is not supported, it should be object with key value pairs where the value can be array.
As long as the render method of your component returns with a new set of elements Inferno will change the DOM accordingly
Have you checked that you don't have shouldComponentUpdate somewhere preventing the update?
I have an array as this.state.data and I update data
There is always "this.forceUpdate" method but I doubt it solves your problem, I believe there is something else going wrong at the application level
Does Inferno re-render if one of state entries is an Array and it gets changed.
E.g.
state = {
data: [1,2,3],
} // before
state = {
data: [1, 2, 3, 4],
} // afterOf course
Of course
Oh I thought we must use only immutable stuff as state entry
As long as the state object itself is new one, then its up to the render method of application to handle it correctly to create new vNodes
Thanks!