Question 270517 in SEO Question posted in
Some basic information to get you started with this can be found here.

Seo – How useEffect is called if there is a custom hook which is also using a use effect?

const [allrestro, setallrestro] = useState([]);
  const [filteredrestaurant, setfilteredrestaurant] = useState([]);

  const search = useState("");
  [searchValue, setsearchValue] = search;


  useEffect(() => {
    const getRestaurants = async () => {
      const data = await fetch("https://www.swiggy.com/dapi/restaurants/list/v5?lat=30.9188442&lng=75.8148262&is-seo-homepage-enabled=true&page_type=DESKTOP_WEB_LISTING");
      const json = await data.json();

      setallrestro(json?.data?.cards[5]?.card?.card?.gridElements?.infoWithStyle?.restaurants);
      setfilteredrestaurant(json?.data?.cards[5]?.card?.card?.gridElements?.infoWithStyle?.restaurants);
      setTimeout(() => {
        
      }, 10000);
      

    }
    getRestaurants();

  }, []);

  



  const isOnline = useOnline();
  if (!isOnline) {
    return <h1>You are offline</h1>
  }

It is working fine But when I do this

const Body = () => {
  
  const [allrestro, setallrestro] = useState([]);
  const [filteredrestaurant, setfilteredrestaurant] = useState([]);

  const search = useState("");
  [searchValue, setsearchValue] = search;


  
  const isOnline = useOnline();
  
  if (!isOnline) {
    
    return <h1>You are offline</h1>
  }

  useEffect(() => {
    const getRestaurants = async () => {
      const data = await fetch("https://www.swiggy.com/dapi/restaurants/list/v5?lat=30.9188442&lng=75.8148262&is-seo-homepage-enabled=true&page_type=DESKTOP_WEB_LISTING");
      const json = await data.json();

      setallrestro(json?.data?.cards[5]?.card?.card?.gridElements?.infoWithStyle?.restaurants);
      setfilteredrestaurant(json?.data?.cards[5]?.card?.card?.gridElements?.infoWithStyle?.restaurants);
      setTimeout(() => {
      }, 10000);
      

    }
    getRestaurants();

  }, []);

It is not working!
Is there any problem if I call useOnline above useEffect

Here is the UseOnline Hook

import { useState,useEffect } from "react";

const useOnline=()=>{
    const [state,usestate]=useState(true);
    
    console.log("outside component component")
    useEffect(()=>{
        console.log("outside component");
        window.addEventListener("online",()=>{usestate(true)});
        window.addEventListener("offline",()=>{usestate(false)});
        setTimeout(() => {
            console.log("useOnline useffect")
          }, 5000);
    },[])
    

    return state;
}
export default useOnline;

Can you explain also how hooks is called if there are multiple hooks inside a component?
The cycle of component runs seperately for custom hooks or is it bind to the calling fucntion?

Tags:

2

Answers


  1. 0

    Calling a custom hook in a component that calls useEffect is no different than calling useEffect in the component body. Custom hooks are meant to encapsulate logic, but otherwise work exactly the same.

    An important rule in React is that all hooks must be called at the top level, so you should never call them inside conditions or after early returns. So for example the rule is violated if you call:

    if (!isOnline) { 
  return <h1>You are offline</h1>
}

    Since if !isOnline, the second useEffect might not be called. To fix it, simply move useEffect above the early return.

    Login or Signup to reply.
  2. 0

    The useOnline custom hook works by calling useEffect to listen for the online and offline events. When the user goes online, the state is set to true. When the user goes offline, the state is set to false.

    The useEffect hook is called in the following order:

    1. All custom hooks are called.
    2. All useEffect hooks are called in the order they are defined.

    This means that the useEffect hook in the Body component will be called after the useOnline custom hook.

    The reason why your code is not working is because the useOnline custom hook is returning the initial state of true before the useEffect hook in the Body component has a chance to run. This means that the useEffect hook in the Body component will never be called, because the isOnline state variable will always be true.

    To fix this, you can move the useOnline custom hook into the useEffect hook in the Body component, like this:

    const Body = () => {
  const [allrestro, setallrestro] = useState([]);
  const [filteredrestaurant, setfilteredrestaurant] = useState([]);

  const search = useState("");
  [searchValue, setsearchValue] = search;

  useEffect(() => {
    const isOnline = useOnline();

    if (!isOnline) {
      return <h1>You are offline</h1>;
    }

    const getRestaurants = async () => {
      const data = await fetch("https://www.swiggy.com/dapi/restaurants/list/v5?lat=30.9188442&lng=75.8148262&is-seo-homepage-enabled=true&page_type=DESKTOP_WEB_LISTING");
      const json = await data.json();

      setallrestro(json?.data?.cards[5]?.card?.card?.gridElements?.infoWithStyle?.restaurants);
      setfilteredrestaurant(json?.data?.cards[5]?.card?.card?.gridElements?.infoWithStyle?.restaurants);
      setTimeout(() => {
      }, 10000);
    };

    getRestaurants();
  }, []);
};

    The cycle of the component run separately for custom hooks or is it bind to the calling function

    Custom hooks are essentially functions that return React state and other values. They are not separate components. When a custom hook is used in a component, the code in the custom hook is executed within the context of the calling component. This means that the custom hook has access to the component’s state and other values.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search