Hi, I'm looking for the best lifecycle method approach for my situation. I have some data provided via props from redux, this data needs to be run through a prepareData function before I can loop over it.
Is the best approach to call the function in getDerivedStateFromProps and store the final data in state or call the function in the render method like so:
<SectionList
sections={this.prepareData(this.props.data)} />
First question: is the processed data relevant for any other component? Then may process the data on reducer level and put it in the redux state.
If it is only a process for this particular component then I would tend to put it in render. If the processing is costly then you can shift it to getDerivedStateFromProps because render get possibly called multiple times on any update circle.
And it’s quite ok for components having an own state while using redux. Just keep an eye on storing the data in the right and only one place.
The point of using redux is to minimize the use of scattered component states in your app. Redux maintains a single state for your whole app and it would be best to keep it that way.
The key point is: If the view needs to re-render when the data changes, store it in the state ( Preferable the redux store/ app state ) else don't. In your case, it seems that the data does not change once the component has been rendered, hence the use of state shall not be required.
Kevin Wolf
Full Stack Developer
If you are aiming to performance on redux then I recommend you reselect. By using reselect you get out-of-the-box:
On the other hand, if you were using only local state, then the recommendation is to compute the derived state on the render method rather than using
getDerivedStateFromProps.reactjs.org/blog/2018/06/07/you-probably-dont-nee…