How to trigger an event in React when a component is fully or partially displayed on the user's screen?

Question

React

Hello, I have a list of notifications in the form of a tile, and I need to mark notifications as read when they are completely or 85 percent displayed on the user's screen.

How can this be implemented?

Answer 1

You can change the state as soon as the component is mounted on the page. For example, as soon as the user calls the component with the notification tile, change the state: setIsChecked(true).
Create your own stateful hook and use useEffect to subscribe to changes to props or other dependencies . Then call this hook in the notification tile component and work with the state.