Learn React Hooks

Implementing React.memo for the Post component

First, let's find out when the Post component re-renders. To do this, we are going to add a console.log statement to our Post component, as follows:

1. Edit src/post/Post.js, and add the following debug output when the component renders:

export default function Post ({ title, content, author }) {    console.log('rendering Post')

2. Now, open the app at http://localhost:3000, and open the DevTools (on most browsers: right-click | Inspect on the page). Go to the Console tab, and you should see the output twice, because we are rendering two posts:

The debug output when rendering two posts

3. So far, so ...