#react lifecycle

For a high-quality, in-depth introduction to React, you can’t go past Canadian full-stack developer Wes Bos. Try his course here, and use the code SITEPOINT to get 25% off and to help support SitePoint.

This is a reference guide to help developers quickly figure out which lifecycle method will best fit a solution they’re currently working on in React.

constructor(props)

The constructor for a React component is the first method that gets called. This is where you should initiate state. You should ensure you execute super(props) first. Otherwise, bugs will crop up.

constructor(props) super(props); this.state = count: props.initialCount ;

componentWillMount()

This method is called just before component mounting and render method. Setting state here won’t trigger a re-render. This method sounds like a nice place to set the component’s initial state. However, React’s official guidelines recommend using the constructor() instead.

componentWillMount() // perform setState operations

render()

This is a mandatory method for all React components. It will be invoked when state changes, when the parent component causes it to re-render, or when component.forceUpdate() is called.

The render() method is where you put your JSX code. You can also return false or null if you don’t want to render anything. You can read values from this.prop and this.state, but you can’t call this.setState() (or call another function that does). You should also not directly interact with the DOM. Instead, use componentDidMount().

render() const message = this.state; return( <div> h1>List of Messages</h1> <MessageView message=message /> </div> )

componentDidMount()

This method is invoked right after the component has been mounted and render() has been called. Once a component mounts, it means you have access to the actual DOM nodes. This is a good place for performing network requests such as an API call. If you set state here, a re-render will be triggered.

componentDidMount = () => this.props.fetchContacts()

shouldComponentUpdate(nextProps, nextState)

This method is invoked just before render() whenever there are new props or state changes. The method should only return true or false. If you return false, this means the render function won’t be called. However, do note that:

this method isn’t called in the initial rendering

child components will still re-render if you return false

future versions may not enforce this directive, but instead use it as a hint.

This method has access to nextProps and nextState, which gives you an opportunity to compare them with the current props/state and determine if a re-render is necessary. This is a good place to implement performance optimization code.

shouldComponentUpdate(nextProps, nextState) // put performance optimization code here return true;

componentWillUpdate(nextProps, nextState)

This method is invoked just before render() and right after shouldComponentUpdate() returns true. It’s not called in the initial render. This method allows you to perform preparation actions before an update occurs, such as reseting cache values. You can’t use this.setState() here though. Instead, the official React guide recommends using componentWillReceiveProps().

componentWillUpdate(nextProps, nextState) // perform preparation tasks

componentWillReceiveProps(nextProps)

This method is invoked when a component receives new props after the initial rendering. You can use this method to update component state using this.setState() — for example, receiving a response from a network or API request.

This method may be triggered even if the props haven’t changed. This can be triggered from a parent component, causing the component to re-render. It’s recommended that you compare nextProps with current props to determine if a re-render is necessary.

componentWillReceiveProps = (nextProps) => // check if id has changed if (nextProps.contact._id !== this.props.contact._id) this.setState(contact)

componentDidUpdate(prevState, prevProps)

This method is invoked right after render(). However, it’s not called during the initial render. It also isn’t called if shouldComponentUpdate() returns false.

This is a good place to perform network requests and DOM manipulations. You may need to compare previous props/state to current ones to determine if the logic you placed here needs to run.

componentDidUpdate(prevState, prevProps) // perform DOM manipulations and network requests

componentWillUnmount()

This method is invoked just before a component is unmounted and destroyed. This is a good place to perform any necessary cleanup — such as removing listeners, revoking network requests, and invalidating timers. You can also perform DOM manipulations here.

componentWillUnmount() // perform cleanup actions

Recommended Courses

Wes Bos

A step-by-step training course to get you building real world React.js + Firebase apps and website components in a couple of afternoons. Use coupon code ‘SITEPOINT’ at checkout to get 25% off.

I write clean, readable and modular code. I love learning new technologies that bring efficiencies and increased productivity to my workflow. Currently am into React & Javascript stuff.

via JavaScript – SitePoint http://ift.tt/2xNVqLT