You've scored {this.state.points} points.
You've scored {this.state.points} points.
Hurray!
} } ``` If you want to render elements to the DOM, — e.g., returning some `JSX` — the `render` method is where you would write this (as shown above). You could also return plain strings and numbers, as shown below: ```jsx class MyComponent extends React.Component { render() { return "Hurray" } } ``` Or, you could return arrays and fragments: ```jsx class MyComponent extends React.Component { render() { return [Hello
,
World
];
}
}
```
```jsx
class MyComponent extends React.Component {
render() {
return Hello
World
Hello World
;
}
}
```
Lastly, you could return a [portal](https://reactjs.org/docs/portals.html) from the render method:
```jsx
class MyComponent extends React.Component {
render() {
return createPortal(this.props.children, document.querySelector("body"));
}
}
```
An important thing to note about the render method is that the render function should be pure i.e do not attempt to use `setState`or interact with the external APIs.
#### 4. `componentDidMount()`
After `render` is called, the component is mounted to the DOM and the `componentDidMount` method is invoked.
This function is invoked immediately after the component is mounted to the DOM.
You would use the `componentDidMount` lifecycle method to grab a DOM node from the component tree immediately after it’s mounted.
For example, let’s say you have a modal and want to render the content of the modal within a specific DOM element:
```jsx
class ModalContent extends React.Component {
el = document.createElement("section");
componentDidMount() {
document.querySelector("body).appendChild(this.el);
}
// using a portal, the content of the modal will be rendered in the DOM element attached to the DOM in the componentDidMount method.
}
```
If you also want to make network requests as soon as the component is mounted to the DOM, this is a perfect place to do so:
```jsx
componentDidMount() {
this.fetchListOfTweets() // where fetchListOfTweets initiates a netowrk request to fetch a certain list of tweets.
}
```
You could also set up subscriptions such as timers. Here’s an example:
```jsx
// e.g requestAnimationFrame
componentDidMount() {
window.requestAnimationFrame(this._updateCountdown);
}
// e.g event listeners
componentDidMount() {
el.addEventListener()
}
```
Just make sure to cancel the subscription when the component unmounts. I’ll show you how to do this when we discuss the `componentWillUnmount` lifecycle method.
### Updating lifecycle methods
Whenever a change is made to the `state` or `props` of a React component, the component is rerendered. In simple terms, the component is updated. This is the updating phase of the React component lifecycle.
So what lifecycle methods are invoked when the component is to be updated?
#### 1. `static getDerivedStateFromProps()`
The `static getDerivedStateFromProps` is the first React lifecycle method to be invoked during the updating phase. I already explained this method in the mounting phase, so I’ll skip it.
We already explained this method when reviewing the mounting lifecycle phase. What’s important to note is that this method is invoked in both the mounting and updating phases.
#### 2. `shouldComponentUpdate()`
Once the `static getDerivedStateFromProps` method is called, the `shouldComponentUpdate` method is called next.
In most cases, you’ll want a component to rerender when state or props changes. However, you do have control over this behavior.
Within this lifecycle method, you can return a boolean — `true` or `false` — and control whether the component gets rerendered (e.g., upon a change in state or props).
This lifecycle method is mostly used for performance optimization measures. However, this is a very common use case, so you could use the built-in [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) when you don’t want a component to rerender if the `state`and `props` don’t change.
#### 3. `render()`
After the `shouldComponentUpdate` method is called, `render` is called immediately afterward, depending on the returned value from `shouldComponentUpdate`, which defaults to `true` .
#### 4. `getSnapshotBeforeUpdate()`
The [`getSnapshotBeforeUpdate`lifecycle method](https://blog.logrocket.com/how-is-getsnapshotbeforeupdate-implemented-with-hooks/) stores the previous values of the state after the DOM is updated. `getSnapshotBeforeUpdate()` is called right after the `render` method.
Most likely, you’ll rarely reach for this lifecycle method. But it comes in handy when you need to grab information from the DOM (and potentially change it) just after an update is made.
Here’s the important thing: the value queried from the DOM in `getSnapshotBeforeUpdate` refers to the value just before the DOM is updated, even though the `render` method was previously called.
Think about how you use version control systems, such as [Git](https://git-scm.com/). A basic example is that you write code and stage your changes before pushing to the repo.
Let’s assume the render function was called to stage your changes before actually pushing to the DOM. Before the actual DOM update, information retrieved from `getSnapshotBeforeUpdate` refers to those before the actual visual DOM update.
Actual updates to the DOM may be asynchronous, but the `getSnapshotBeforeUpdate` lifecycle method is always called immediately before the DOM is updated.
This is a tricky method, so let’s look at another example.
A classic case where the `getSnapshotBeforeUpdate` lifecycle method comes in handy is in a chat application. I’ve gone ahead and added a chat pane to the previous example app:
The implementation of the chat pane is as simple as it looks. Within the `App` component is an unordered list with a `Chats` component:
```jsx
-
...