Cannot update a component from inside the function body of a different component warning

Question

I wrote a component called component1 as below and it is inside the parent component. The component1 is at the bottom of the page and I don't want to render it unless the user scroll down to that area. Thus I use the InView from 'react-intersection-observer' to determine if this area is in view. If so then fetch data and render data. But I get the warning: Warning: Cannot update a component from inside the function body of a different component. What is the reason of getting this warning? Is it because I set the setInView in the component?

<parent> <component4 /> <component3 /> <component2 /> <component1 /> </parent> const component1 = () => { const [inView, setInView] = React.useState(false); const [loading, error, data] = fetchData(inView); // hook to fetch data // data is an array const content = data.map(d => <div>{d}</div>); const showEmpty = true; if (data) { showEmpty = false; } return (<InView> {({ inView, ref }) => { setInView(inView); return ( <div ref={ref}> <div>{!showEmpty && content}</div> </div> ) </InView>); }

aren't you missing a return in your component ? Where is the jsx being returned? — Manas
– Manas, Commented Aug 20, 2020 at 18:17
I think this component should be capitalized, also the parent tag. — Ahmad Khidir
– Ahmad Khidir, Commented Jan 4, 2021 at 16:56

MohammadHosseinZiyaaddini · Accepted Answer · 2021-01-04 16:45:15Z

As I understood you want to fetch data when the component gets in view right?

here is my solution with useEffect:

const Componet1 = () => { const [inView, setInView] = useState(false) const [myData, setMyData] = useState(null) useEffect(() => { if (inView && !myData) { const [loading, error, data] = fetchData(inView); // hook to fetch data if (data) { setMyData(data) } } return () => { // cleanup } }, [inView,myData]) return ( <InView as="div" onChange={(inView) => setInView(inView)}> {myData ? myData.map((d, i) => <div key={i}>{d}</div>) : 'Loading...'} </InView> ); }

Also, this fetches data just once.

Collectives™ on Stack Overflow

Cannot update a component from inside the function body of a different component warning

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related