0

I am handling useEffect which is waiting for the change in a property from the context API that is called only when required, the strange thing is that as soon as the first render is executed, said property from the context is executed immediately. What can it be due to?

const { getXlsProducts, xlsProducts } = useProducts() // context

...

const xls = async() => { 
  await getXlsProducts(1, 10)
}

useEffect(() => { // This useEffect is called automatically on the first render 
  console.log('why?'); 
}, [xlsProducts]);

This is my code in the context where I never call the function on the first render, it is only called when required.

Context:

const [ xlsProducts, setXlsProducts] = useState([])

    const getXlsProducts = async(page, limit) => { 
       
        const LS = localStorage.getItem('cmtjs')

        const config = {
            headers: {
                "Content-Type": "application/json",
                apiKey: LS
            } ,
            params: {
                page,
                limit
              }            
        }
        try {
            const { data } = await axiosClient(`/products`, config)
            setXlsProducts(data) 
        } catch (error) {
            console.log(error);
        }
     }

OscarDev
  • 917
  • 14
  • 34

0 Answers0