1

I keep bumping into this problem in different scenarios where I want to render a component conditionally and the state is not set immediately thus the component I want to render is momentarily shown after a "flicker" of the other component in my conditional logic.

In the code below I have a useContext instance and I have a Boolean assigned to context.state.clientsExist. Depending on the state of this Boolean I want to show one of two components.

The problem is that the component in the "else" branch flickers momentarily. This is because const [clients_exist_bool, set_clients_exist_bool] = useState(false); does not get set immediately.

I tried a few ways to hide this with a loader and I can't get it right. 

function Landing(props){
  const [loading_bool, set_loading_bool] = useState(true);  
  const [clients_exist_bool, set_clients_exist_bool] = useState(false);

  const context = useContext(Context);

  useEffect(()=>{

    let clientsExist = context.state.clientsExist;
    set_clients_exist_bool(()=>{

      if(clientsExist){
        return true
      }

    })

  },[context.state.clientsExist])


  const { classes } = props;


  // render loader...? I tried and still flickers.

  if(clients_exist_bool){
    return (

     <div className = {classes.bgImage}> 
        <div className={classes.root}>
            <Grid container spacing={12}>
              <Grid item xs={12}>
              </Grid>
              <Grid item xs={12} sm={12}>
              </Grid>
              <Grid item xs={12} sm={12}>
                  <div className={classes.interactionContainer}>

                        <h1 className="logoFontContainer">
                            Workflow Magic
                        </h1>

                </div>

              </Grid>
          </Grid>

            <CreateClients/> {/* MOVE UP */}

        </div>
    </div>

  )




  }else{


    return(

      <div className = {classes.bgImage}> 
        <div className={classes.root}>
            <Grid container spacing={12}>
              <Grid item xs={12}>
              </Grid>
              <Grid item xs={12} sm={12}>
              </Grid>
              <Grid item xs={12} sm={12}>
                  <div className={classes.interactionContainer}>

                        <h1 className="logoFontContainer">
                            Workflow Magic
                        </h1>

                      <h2 className={classes.tagline}>The simple way to organize your online gigs</h2>



                        <a className={classes.customAnchor}href="/sign-in">
                        <h3 className={classes.signInSignUp}>SignIn / SignUp</h3></a>




                        <p className={classes.signInSignUpNoHover}>NO?</p>
                        <h3 className={classes.signInSignUpNoHover}>THEN GET STARTED NOW!</h3>

                  </div>
              </Grid>
             </Grid>

          <CreateClients/>
        </div>
    </div>


    )



  }



}
William
  • 4,422
  • 17
  • 55
  • 108
  • What if you re order the hooks, get context first and do: `const [clients_exist_bool, set_clients_exist_bool] = useState(context.state.clientsExist);`? – HMR Nov 21 '19 at 07:24
  • Does not change. Thanks though! – William Nov 21 '19 at 10:04
  • The issue is only on the first render of the component? In the first render, what would you expect to render, if `clients_exist_bool` isnt set yet, should it display a loader? if it is set then the initial value of the state should already have that value, is this the issue? – Alvaro Nov 21 '19 at 10:06
  • @Alvaro The flicker only happens on subsequent page refreshes after clients_exist_bool is set to true . I am only entertaining the loader component as a way to fix the flicker issue. I would prefer to fix this without a loader component but if there is not way to do it without one I am fine with that. Either way, I haven't found a solution even when experimenting with a "loader" component. – William Nov 21 '19 at 10:17
  • The issue is that the initial value of the state is false `... = useState(false)`. If it needs to be the real value, which might be true, then you have to assign some logic there. For instance, how is the context geting the `clientsExist` value? – Alvaro Nov 21 '19 at 10:21
  • The clientsExist is based on on indexDB query using a third party library. I will edit my initial post to include the relevant parts of that code. Thanks – William Nov 21 '19 at 10:25

0 Answers0