How to prevent react from re-rendering the whole component?

Question

I adapted the following component definition from here as shown below. However, unlike the example my component re-renders every time I move the mouse on it.

The re

Answer 1

Pure components defined as function will always re-render.

Convert the component to a class and prevent the re-render in shouldComponentUpdate() returning false.

The signature is shouldComponentUpdate(nextProps, nextState). Say, you prevent re-render by verifying that componet's params haven't changed:

shouldComponentUpdate(nextProps, nextState){
   return !equals(nextProps, this.props); // equals() is your implementation
}