Functional Components React - updating a state causes the entire page to re-render

Question

Thank you very much for your help in advance. I'm not sure why when I update the percentageDone state in loadDataFunction() it updates RenderData1Component when in fact it It shouldn't be like this. Shouldn't it only update when data1 changes?

I have a piece of code like this.

const [loading, setLoading] = useState(true);
  const [data1, setData1] = useState(null);
  const [percentageDone, setPercentageDone] = useState(0);


  LoadDataFunction(){
    // Call multiple apis (let's say there are 10) in one promise and call setPercentageDone() when each api completes.
  }
  useEffect( () => {
     LoadDataFunction()
  },[])
  useEffect( () => {
     if (condition satisfied) {
       LoadDataFunction() // Reload the latest data
     }
  }, [condition])

  return (
    loading ? percentageDone
            : <RenderData1Component data={data1}>
  )

I only want to update when the data1 state is updated, not percentageDone< /code>. But whenever I update setPercentageDone(), it also triggers a re-rendering of .

Answer 1

I'm not sure, but this might help you.

const [loading, setLoading] = useState(true);
const [data1, setData1] = useState(null);
const [percentageDone, setPercentageDone] = useState(0);

const loadDataFunction = async () => {
  // 执行 API 调用并更新 percentageDone
};

useEffect(() => {
  loadDataFunction().then(() => {
    setLoading(false);
  });
}, []);

useEffect(() => {
  if (condition) {
    setLoading(true);
    loadDataFunction().then(() => {
      setLoading(false);
    });
  }
}, [condition]);

return (
  loading ? (
    <div>{percentageDone}% 加载中...</div>
  ) : (
    <RenderData1Component data={data1} />
  )
);

Possibly you are giving multiple conditions, which may cause problems. Please check this out too.