scroll positions of components (Element) in a state object in react

 I need to store the scroll positions of components (Element) in a state object at the root level of my app (MyApp).

In order to render the scroll position of each Element, (as DOM style don't include a scrollTop property) I tried to pass the props to the scrollTop value of a ref object pointing to the JSX div, from a useEffect, but it fires an infinite loop. Any idea on what is going wrong here, better logic to propose ?

Answer -

To store the scroll positions of components in a state object at the root level of your app, you can create a context using the createContext function from React. The context can store an object with keys for each component and their respective scroll position.

import React, { createContext, useContext, useEffect, useRef, useState } from 'react'; // Create context for storing component scroll positions const ScrollPositionsContext = createContext({}); function MyApp() { // State object to store component scroll positions const [scrollPositions, setScrollPositions] = useState({}); // Update scroll position of a component in the state object function updateScrollPosition(componentId, scrollPosition) { setScrollPositions(prevState => ({ ...prevState, [componentId]: scrollPosition })); } return ( <ScrollPositionsContext.Provider value={{ scrollPositions, updateScrollPosition }}> {/* Render components here */} </ScrollPositionsContext.Provider> ); } function Element({ id }) { const { updateScrollPosition } = useContext(ScrollPositionsContext); const ref = useRef(null); useEffect(() => { // Save the scroll position of this component to the state object function handleScroll() { updateScrollPosition(id, ref.current.scrollTop); } ref.current.addEventListener('scroll', handleScroll); return () => ref.current.removeEventListener('scroll', handleScroll); }, [id, updateScrollPosition]); return ( <div ref={ref}> {/* Render content here */} </div> ); }

In this implementation, we create the ScrollPositionsContext context using createContext. We also define a state object scrollPositions to store the scroll positions of each component.

In the MyApp component, we provide the ScrollPositionsContext context with the scrollPositions state object and an updateScrollPosition function as its value. The updateScrollPosition function is used to update the scroll position of a component in the state object.

In the Element component, we use useContext to access the updateScrollPosition function from the ScrollPositionsContext context. We also use a useRef hook to create a reference to the div element that we want to track the scroll position for. We then use an useEffect hook to add an event listener to the div element that listens for the scroll event and updates the scroll position of the component in the state object using the updateScrollPosition function.

Finally, we render the Element component with the ref prop pointing to the JSX div element that we want to track the scroll position for.

Note that this implementation assumes that each component has a unique id prop that can be used as a key in the state object to identify its scroll position.