I’m building my first React app and have a feeling I’m doing something wrong
Here’s the structure I’m working with:
< App (source of thruth) />
< Settings component />
< Timer component />
(i.e. App renders and passes props to children - Settings and Timer)
Timer needs to be updated every 1s, so I end up also updating Settings, because it’s in the same render() call. This is not necessary so in the Settings shouldComponentUpdate() hook I prevent Settings from updating unless any of the new props carry values that are different from the current ones, by comparing them one by one:
shouldComponentUpdate(nextProps, nextState){
return this.state.fnStatus.name != nextProps.fnStatus.name
|| this.state.showOptions != nextState.showOptions
|| this.state.currentOption != nextState.currentOption;
}
Is there any other way to only update Timer in this setup?
Here is the codepen: https://codepen.io/pwkrz/pen/GQarYM