состояние не обновляется в дочернем компоненте после обновления внутри родительского компонента

Question

Родительский компонент обновляет свое логическое состояние и отправляет это состояние дочернему, но в дочернем это обновленное состояние не отражает.

 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 не работает в дочернем компоненте AllUser. Но в дочернем компоненте заголовка его рабочий . Это из-за события прокрутки. в дочернем компоненте. Даже весь пользовательский компонент не отображается onBottomEvent срабатывает, когда мы достигаем нижней части страницы

дочерний компонент

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, неоднократно вызываемый а также вызывает API, если дочерний компонент не показан

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

Вам необходимо добавить onScrollCheck к зависимостям useEffect, иначе ваш эффект использования не будет вызываться при изменении isShown:

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

Если вы боитесь проблем с производительностью, вы можете использовать useCallback для onScrollCheck:

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