Question 217626 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to make rendering of a component wait until we get the data in react

I am currently working on adding create option to my fronted react app, As I first want to test the fronted’s working , I used localStorage for storing my data. Based on the length of data, that I receive from the localStorage I will render two different components (if the length is zero, then one else the other) . I am using useEffect() hook to get the data and to prevent the error "localStorage is not defined". But, the hook is slow and it takes around 5/6 seconds to actually render the second component if I add some data value into the localStorage and by default the code is rendering just the first component even if the length of the data in the localStorage is non-zero.

The code part:

export default function Onboard() {
  const [dataValues, setdataValues] = useState('');
  const [redFlag, setredFlag] = useState('');
  useEffect(() => {
    let val;
    val = JSON.parse(localStorage.getItem('DataValues') || '[]') || [];
    setdataValues(val);
    let flag;
    flag = dataValues.length;
    setredFlag(flag);
  }, []);
  const [popup, setpopup] = useState(false);
  const [SelectedAccess, setSelectedAccess] = useState('All');
  return (
    <div>
        {redFlag == 0 ? <Component1 /> : <Component2 />}
    </div>
   )}

This is just a snippet of the code. By default the code is rendering Component1 even if the localStorage has values stored in it and it takes a long delay to render Component2. Any help regarding this will be much appreciated.

Tags:

3

Answers


  1. 0

    if redflag length is greater than zero then show the component otherwise not.

    export default function Onboard() {
  const [dataValues, setdataValues] = useState('');
  const [redFlag, setredFlag] = useState('');
  useEffect(() => {
    let val;
    val = JSON.parse(localStorage.getItem('DataValues') || '[]') || [];
    setdataValues(val);
    let flag;
    flag = dataValues.length;
    setredFlag(flag);
  }, []);
  const [popup, setpopup] = useState(false);
  const [SelectedAccess, setSelectedAccess] = useState('All');
  return (
    <div>
        {redFlag > 0 ? <Component1 /> : <Component2 />}
    </div>
   )}
    Login or Signup to reply.
  2. 0

    Try this one I hope this will solve your problem. Check and comment…

    export default function Onboard() {
    const [dataValues, setdataValues] = useState("");

    let val = JSON.parse(localStorage.getItem("DataValues"));

    useEffect(() => {
        setdataValues(val);
    }, [val]);
    const [popup, setpopup] = useState(false);
    const [SelectedAccess, setSelectedAccess] = useState("All");
    return <div>{dataValues ? <Component2 /> : <Component1 />}</div>;
}
    Login or Signup to reply.
  3. 0

    To fix this, you can update the useEffect to set the redFlag state based on the val.length directly instead of relying on dataValues.length.

    export default function Onboard() {
  const [dataValues, setdataValues] = useState([]);
  const [redFlag, setredFlag] = useState(0);

  useEffect(() => {
    let val;
    try {
      val = JSON.parse(localStorage.getItem('DataValues')) || [];
    } catch (error) {
      val = [];
    }
    setdataValues(val);
    setredFlag(val.length);
  }, []);

  const [popup, setpopup] = useState(false);
  const [SelectedAccess, setSelectedAccess] = useState('All');

  return (
    <div>
      {redFlag === 0 ? <Component1 /> : <Component2 />}
    </div>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search