setState in componentWillMount is an antipattern. In React components, you cannot set state before the component is mounted. So, instead of attempting to set the state in componentWillMount, you should do it in componentDidMount.isMounted is an antipattern.getInitialState often leads to duplication of "source of truth", i.e. where the real data is. This is because getInitialState is only invoked when the component is first created.Whenever possible, compute values on-the-fly to ensure that they don't get out of sync later on and cause maintenance trouble.Two valid but unequal nodes with the same data-reactid error.Thanks for the invite.
IMO, A good starting point to read is this nice pattern collection here and here
It's not super updated yet because it recommends Alt.js instead of Redux ;-)
Some more topics to throw in
Denny Trebbin
Lead Fullstack Developer. Experimenting with bleeding-edge tech. Irregularly DJ. Hobby drone pilot. Amateur photographer.
Jon
ClojureScript Developer.
My answer:
I've trained myself very long time to think in functional programming's way so I maybe not the best one to answer this question but here're are some tips I got in building https://jianliao.com .
Back the time we are using Backbone we used
Backbone.Eventsa lot to synchronise states among different views. It was quite troublesome as our app grow and the behaviors are hard to predict. After migrated to React the event emitters are still there, but we decide to make them as few as possible.Facebook introduced
immutable-jsfor JavaScript. React does not force people to use immutable data, but if someone use mutable objects everywhere he will find it very hard to optimise the performance after the app grows larger. Also immutable data is more reliable.We already known it's bad idea to add side-effects in the function body of
this.render. I found it also bad idea to have that inthis.componentDidMountthis.componentWillUnmount. If you are using tools like Redux which time travels you will find components mount and unmount for many reasons, and they are also part of the rendering process. So, don't introduce side-effects in lifetime hooks if you still have other choices.