Rendering optimization

Earlier in this chapter, we saw that a React component is rerendered when its state changes. A component is also rerendered when its props change. It is important to understand that child components are rerendered when their parent component re-renders. So, changing some state could be an expensive change if there are lots of components that contain lots of elements that get rerendered as a result.

In this section, we are going to force one of the components we have implemented to be rendered multiple times unnecessarily. Then, we'll optimize it. Follow these steps to do so:

1. In QuestionList.tsx, change the QuestionList component so that it has an explicit return statement and add a statement to output that the component is rendering in the console:

export const QuestionList: FC<Props> = ({ data, renderItem }) => {
  console.log('Rendering...