React lifecycle methods
Useful methods
componentWillMount()
- invoked only before first rendering (before initial render)
- mostly useless, defining state should be performed in
constructor
- we don't have access here to DOM and refs
- avoid changing state here and don't call side-effects methods
- do not fetch data here - if you don't have some data required to render, use
defaultProps
instead
- use only for configuring app root or some variabled dependent on initial state and props (but it can be done in constructor)
componentDidMount()
- invoked only after first rendering
- that's the best place for fetching data
- here you can initialize method which uses DOM
- here you can add event listeners
- here you can change state
- causes rerendering
componentWillReceiveProps(nextProps)
- good place when we want to check how props have changed and what we have to update (eg. make a new fetch for data because id has changed)
- isn't called after before first rendering
shouldComponentUpdate(nextProps, nextState)
- we use it when we want to improve performance of our component and avoid unnecessary renders
- it should return boolean value
componentWillUpdate()
- do not change state here!
componentDidUpdate()
- here you can update state according to the new props and etc.
componentWillUnmount()
- here you can clean unfinished API calls and event listeners
render()
- it should be a pure function of props and state
- that's not a place for fetching data and asynchronous operations
- don't mutate state here or access DOM