Where should I put/handle periodic data updates in React?

I'm following the guide in https://reactjs.org/docs/thinking-in-react.html which makes sense for data that I request and update on a filter. However, I want to have some sort of general synchronization job in the background that polls and updates an SQLite database periodically. The question I have is if the SQLite database has detected that there was an update, how do I signal to a list component that it needs to refresh itself? Notes: I am thinking if it was in a context it will trigger a re-render of every component underneath it which may be problematic if I have something like a data entry form since a re-render will cause my focus to be lost In vue land we have emit to emit custom events, but I don't see anything like that in the API guide for React Another approach I was thinking of was to useReducer, but it didn't pan out on the context because it will also cause a re-render just like useState Then I thought of having the reducer on the filtered table component but then I don't know how to trigger it from the context. I also tried putting in a useRef to prevent the re-render but that does not work for documented reasons which I have checked. useCallback was supposedly the solution, but the dependencies would be triggering a rerender

Apr 12, 2025 - 15:27

I'm following the guide in https://reactjs.org/docs/thinking-in-react.html which makes sense for data that I request and update on a filter.

However, I want to have some sort of general synchronization job in the background that polls and updates an SQLite database periodically.

The question I have is if the SQLite database has detected that there was an update, how do I signal to a list component that it needs to refresh itself?

Notes:

I am thinking if it was in a context it will trigger a re-render of every component underneath it which may be problematic if I have something like a data entry form since a re-render will cause my focus to be lost

In vue land we have emit to emit custom events, but I don't see anything like that in the API guide for React

Another approach I was thinking of was to useReducer, but it didn't pan out on the context because it will also cause a re-render just like useState

Then I thought of having the reducer on the filtered table component but then I don't know how to trigger it from the context.

I also tried putting in a useRef to prevent the re-render but that does not work for documented reasons which I have checked.

useCallback was supposedly the solution, but the dependencies would be triggering a rerender