This post covers some of the key concepts in React – props, state and keys. Then I will talk about React’s multiple life cycle functions which give us hooks for initializing our components and attaching behaviors at specific points in time.
Data for a given React component is held in two places, props and state.
Props is short for properties. We can think of properties a lot like HTML attributes. Props allow us to pass data down to child components. Props are immutable since they are passed down from the parent, they are effectively owned by the parent.
State in contrast is mutable and since state is mutable we should only strive to utilize state on our controller views. In other words, only use state on the top level components. Pass data down to your child components via props.
getInitialState – We can optionally define a getInitialState function. In this function, we can set the initial state for our component. This should typically only be done in the top level component, also known as our controller view.
getDefaultProps – We can also define default values for properties on our components using the getDefaultProps method. Inside this method, we can return a set of properties that our component should use by default if the parent component doesn’t declare a value.
React’s Life Cycle Methods
componentWillMount
When – Runs immediately before initial rendering. Runs both on the client and server.
Why – This function is a great spot to set the component’s initial state.
componentDidMount
When – Runs immediately after render.
Why – By the time this function is called, the component’s DOM exists. So this is a handy spot for integrating with other frameworks such as third party component libraries. This is also a good spot to set timers and make AJAX requests since you now know the component is rendered in the DOM.
componentWillReceiveProps
When – Run when the component is receiving new properties. In other words, when properties have changed. Not called on initial render.
Why – This is a place to set state before the next render since this runs just before the new properties are received.
shouldComponentUpdate
When – Runs immediately before render and when props or state are being received by your component.
Why – The big reason this function is useful is for performance. Why? Well, sometimes props and/or state changes, but the component doesn’t actually need to re-render because the data change doesn’t affect the DOM. When this is the case, you can return false from this function to avoid an unnecessary render call.
componentWillUpdate
When – Runs immediately before rendering when new props or state are being received. Not called on initial render.
Why – This function is a useful place to prepare for an update. However, do note, we cannot call setState in this function.
componentDidUpdate
When – Is evoked immediately after the component’s updates are flushed to the DOM. Not called for the initial render.
Why – This function allows us to operate on the DOM immediately after the component has been updated and re-rendered in the DOM.
componentWillUnmount
When – This function runs just before the component is unmounted/removed from the DOM.
Why – This is a great place to cleanup by destroying any related resources or DOM elements that were created when the component was mounted.
Keys for Dynamic Children
When creating multiple child components dynamically, we need to provide a key for each child component. The key is often the primary key for the corresponding database record, but it need not be. We just need to declare a unique ID for each specific record. As child components are added and removed, React uses this key to assure that child components are properly reordered or destroyed.