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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.