How can I stop React page to re-render?

Question

I am using fetch<\/code> to get data from API. I am using useEffect<\/code> for page to stop rerender. But its not working

  const [load, setLoad] = useState(false);

 if (load) {
    return <h2>Progress</h2>;
  }


  const fetchPicth = async () => {
    setLoad(true);
    const response = await fetch(url);
    const data = await response.json();
    setPicth(data.pink);
  };

  useEffect(() => {
     setLoad(false);
  }, [fetchPicth]);

Answer 1

This can be solved using 2 approaches

1. <\/li><\/ol>

    Display if data is present.<\/li><\/ol>
    {picth.length === 0 && <div>Progress} {picth.length > 0 && ( <div> {picth.map((book, index) => { return ( <YourComponent><\/YourComponent> ); })}<\/code><\/pre>"

Answer 2

Remove the fetchPicth<\/code> from the dependency array. If you'd like to set load to false you can do it like this:

const [load, setLoad] = useState(false);

 if (load) {
    return <h2>Progress</h2>;
  }


  const fetchPicth = async () => {
    setLoad(true);
    const response = await fetch(url);
    const data = await response.json();
    setPicth(data.pink);
    setLoad(false)
  };

  useEffect(() => {
     fetchPicth();
  }, []);