We have code block like:
<pre><code>function ParentComponent(props) {
 return (
 &lt;ChildComponent style={{ color: 'red' }} /&gt;
 )
}
</code></pre>What performance with the above code?
Normally React only rerender a component of props or state change. For this case, ChildComponent doesn't receive any props. But it always re-renders every time ParentComponent renders.
Why?
When ParentCoponent renders, it always creates a new style object. New style object means props of ChildComponent change so ChildComponent will rerender again.
Solution:
Use className if possible.
If the style is dynamic can create a function with useCallback to get the new style

We have code block like:
```
function ParentComponent(props) {
 return (
 <ChildComponent style={{ color: 'red' }} />
 )
}
```

What performance with the above code?

Normally React only rerender a component of props or state change. For this case, ChildComponent doesn't receive any props. But it always re-renders every time ParentComponent renders.

Why?

When ParentCoponent renders, it always creates a new style object. New style object means props of ChildComponent change so ChildComponent will rerender again.

Solution:
Use className if possible.
If the style is dynamic can create a function with useCallback to get the new style

A common mistake make performance issue in React