👾 Pure Components

Task: Implement a React app with the following requirements:

  • Create a parent component (App) that maintains a counter using useState.
  • Create two child components:
    1. A "CounterDisplay" component that displays the counter value and updates only when the counter changes.
    2. A "StaticMessage" component that displays a static message and should not re-render unless its props explicitly change.
  • Use React.memo to optimise the child components.

Slides

Let's practice pure components!

Your task is to implement a React app with the following requirements.

A "CounterDisplay" component displays the counter value and updates only when the counter changes.

A "StaticMessage" component displays a static message and should not re-render unless its props explicitly change.

Use React.memo to optimise the child components.

Again, you can depend on your tests to check if your solution is correct!

This time, pay close attention to the console and the messages within

The messages produced by your tests will follow the suite name ...

... finished by the test name and result. Good luck!