CODEWITHSUNDEEP
reactjsreact-hooksuse-state
Michael Cauduro
Michael Cauduro

Reputation: 215

React Hook not update conditional component

thank for your time and sorry if this question was already asked, but honestly i didn't find any solution. i'm new on React and i'm trying to create a website-portfolio, i finish my project but now i'm trying to implement a Spinner loader while my video background is loading. i'm going to simplify the code only for explain better the problem. Here's my classes

function App() {

  const [isLoading, setIsLoading] = useState(true);

  return isLoading ? (
      <LoaderContainer>
          <Loader type="Puff" color="rgb(241, 113, 27)" height={100} width={100} />
      </LoaderContainer>
  ) : (
      <Router>
         <Home isLoading={isLoading} setIsLoading={setIsLoading} />
      </Router>
  );
  }

  export default App;

  //HOME functional component-------------------

  const Home = ({ isLoading, setIsLoading }) => {

  return (
    <>
      //...other components
      <HeroSection isLoading={isLoading} setIsLoading={setIsLoading} />
      //...other components
    </>
  );
  };

  export default Home;

Now.. in HeroSection there is a video with this option: " onLoadStart={() => setIsLoading(false)}" this working fine but not for update the LoaderContainer with the Router one. i really don't now why. if i try to put an useEffect inside App with a timer and try to update isLoading it's working fine!! also isLoading is used inside of HomeContainer for render a String and it's updating correctly! it seems that isLoading in the conditional statement not re-render the component but only if setIsLoading is called from the child (Home).

Thank all for the support!

Upvotes: 1

Views: 403

Answers (1)

nolan
nolan

Reputation: 467

Because in this case there's an endless loop: isLoading === true -> Home not render -> onLoadStart not trigger -> no chance to set isLoading false -> ...

You can't avoid rendering <HeroSection/> even in loading because HeroSection is responsible to terminate the loading. So the solution will be controlling the opacity or stacking context to make <Home/> invisible at the start instead of not rendering at all

Upvotes: 1

Related Questions