styled-components, as of v6.1.13 or earlier, inserts CSS rules during render. This can lead to problems when React is processing a non-blocking state update (related to React.lazy, Suspense, startTransition, or useDeferredValue). React 18 introduced a new hook, useInsertionEffect, that ensures CSS rules are inserted after the render phase, but before refs are set, useLayoutEffect and useEffect hooks are called, and the browser paints.
The video below demonstrates the difference in the two approaches when React is processing a very demanding render loop that uses startTransition to opt-in to Concurrent Mode rendering. The current, insert CSS during render, approach is on the left hand side. The right hand side uses a fork of styled-components, which inserts CSS in useInsertionEffect instead (#4332) and is a able to iterate twice as fast and have 10-20% higher average FPS:
updated.bench.4K.mov
You can run the before and after yourself to verify.
The useInsertionEffect variant is tested on a fork of styled-components, named @sanity/styled-components.