Screen tearing is an issue that can crop up when you introduce concurrent rendering into your application. With React 18 coming out, you'll want to know how to handle this issue.
The React team has given us a solution for tearing with useSyncExternalStore
. When we import his, we just need to pass our store's subscribe and selector functions to solve this issue. The added benefit here is that we can remove our uses of useCallback
throughout our application.