state is not updating in child component after updated inside parent component

Question

Parent component updating its Boolean state and sending this state to child but in child this updated state is not reflecting.

 const [showSeeAllNewsComponent, setShowSeeAllNews] = useState(false);
 const onClickSeeAll_news = isShown => {
    console.log("back", isShown, !isShown);
    setShowSeeAllNews(isShown);
  };
 const onBottomEventSeeAlluser = async () => {
    if (showSeeAllNewsComponent) {
        Pagination.offset = Pagination.offset + 1;
        await HomeAPI.newsDetail(Pagination.offset, Pagination.limit).then(
            userData=> {
                console.log(userData.data, loading);
                setUserData(userPData=>([...userPData, ...userData.data]));      
            }
        );
    }
  };
return(
 <Header  onBackClick={(valBool: boolean) => onClickSeeAll_news(valBool)} isheaderBreadCrumb={showSeeAllNewsComponent}></Header>
{showSeeAllUserComponent ? <AllUser userDataNews={userData}  onBottomEvent={onBottomEventSeeAllUser}  isShown={showSeeAllUserComponent} ></AllUser> : <div>Some Other Component</div>
)

showSeeAllUserComponent is not working in AllUser child component.but in Header child component its working.Is that because of scroll event. in child component.Even The All User Component Is not shown onBottomEvent is triggered when we reach the bottom of thre page

child component

function AllUser({ userDataNews, onBottomEvent,isShown }) {
  useEffect(() => {

    window.addEventListener("scroll", onScrollCheck, true);
  }, []);
  const onScrollCheck = event => { 
    if(isShown){
       event.target.scrollHeight - event.target.scrollTop ===
       event.target.clientHeight
        ? onBottomEvent()
        : "";
    }
  };
}

EdiT scrollcheck repeatedly called and also it calls api if child component not shown

const [showSeeAllNewsComponent, setShowSeeAllNews] = useState(false);

 const onScrollCheck = event => {
    console.log("scrollchecks", showSeeAllNewsComponent);
     if (showSeeAllNewsComponent) {
    event.target.scrollHeight - event.target.scrollTop ===
    event.target.clientHeight
      ? onBottomEventSeeAllNews()
      : "";
    }
  };

  useEffect(() => {
    window.addEventListener("scroll", onScrollCheck, true);
    return () => window.removeEventListener("scroll", onScrollCheck);
  }, [onScrollCheck]);

 const onClickSeeAll_news = isShown => {
    console.log("back", isShown, !isShown);
    setShowSeeAllNews(isShown);
  };
 const onBottomEventSeeAlluser = async () => {
    if (showSeeAllNewsComponent) {
        Pagination.offset = Pagination.offset + 1;
        await HomeAPI.newsDetail(Pagination.offset, Pagination.limit).then(
            userData=> {
                console.log(userData.data, loading);
                setUserData(userPData=>([...userPData, ...userData.data]));      
            }
        );
    }
  };
 return(
 <Header  onBackClick={(valBool: boolean) => onClickSeeAll_news(valBool)} 
 isheaderBreadCrumb={showSeeAllNewsComponent}></Header>
 {showSeeAllUserComponent ? <AllUser userDataNews={userData}    isShown= 
 {showSeeAllUserComponent} ></AllUser> : <div>Some Other Component</div>
 )

Answer 1

You need to add onScrollCheck to the useEffect dependencies, otherwise your use effect will not be called when isShown changes:

  useEffect(() => {
    window.addEventListener("scroll", onScrollCheck, true);
    return () => window.removeEventListener('scroll', onScrollCheck);
  }, [onScrollCheck]);

If you're afraid of performance issues you can useuseCallback for onScrollCheck:

  const onScrollCheck = useCallback(event => { 
    if(isShown){
       event.target.scrollHeight - event.target.scrollTop ===
       event.target.clientHeight
        ? onBottomEvent()
        : "";
    }
  }, [isShown, onBottomEvent]);