React: Rendering two elements in the same frame

Issue

I have a code, like

<Box>
 <SomeIcon/>
 <HightlightSearch query={query}>
   {text}
 </HightlightSearch>
</Box>

HighlightSearch uses innerHtlm to highlight query results in a child (text) - it is a pretty simple function that uses useEffect() inside with dependencies being child (text) and query.

What happens is that SomeIcon gets rendered first, and then, after a very short but noticeable time, the text gets rendered (I can clearly see it if I use per-frame view of React devtools in Chrome).

When I remove HightlightSearch, the issue goes away

Is there a way for me to make sure the icon and the text are rendered together?

Solution

Use useLayoutEffect instead of useEffect. It executes its callback and rerenders the component immediately instead of on the next frame.

Answered By - DustInComp