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