I recently came across a piece of React code that caught my attention (new project, new codebase and this pattern is used quite a lot).

Imagine you have a table displaying a list of movies and you can select each movie row by ticking a checkbox. The checkbox selection needs to reset every time the user selects a different year, category or rating somewhere else on the page (the table needs to display new data when these filters are changed, so the selection is no longer valid).

The code I am talking about was a useEffect that was setting the selectedMovieId state and it was written something like:

const [selectedMovieId, setSelectedMovieId] = useState<string>("")

// more code here...