Create-react-app linting question about use-http HOT 15 CLOSED

Try passing response into useEffect

from use-http.

@rhobot I need to take another look. Thanks for the heads up!

from use-http.

I will get to this as soon as possible. Trying to finish up retryOn and retryDelay real quick

from use-http.

@rhobot This should be working correctly in v0.4.5

from use-http.

Hey! Sorry for the delay. The examples are laid out for simplicity of the beginner, but technically, you should listen to the linting rules. Wrap initializeTodos in useCallback.

from use-http.

Also, thanks so much for your support! I love this thing too! That's why I made it lol

from use-http.

@tobyl is you question answered? Gonna close this if it is :)

from use-http.

I'm sorry - I didn't get the notifications for your msgs. Yes, this is super-helpful - I'll take your advice - thank you so much!

from use-http.

If you're having infinite loop problems, either destructure your request object and use the method as a dependency like:

const { get, loading } = useFetch(...)

const initializeTodos = useCallback(async () => {
  ...
}, [get])

or you could do this for on mount

const mounted = useRef(false)
useEffect(() => {
  if (!mounted.current) {
    initializeTodos()
    mounted.current = true
  }
})

from use-http.

Those look like two great options - I'll play around with it, thanks again!

from use-http.

I have a related question. The lint warns that I don't add response.ok. But I believe response.ok should not be added as a dependency. Otherwise, it triggers useEffect again:

useEffect(() => {
  async function fetchSomething() {
    const data = await get(...)

    if (response.ok) {
       // ...
    }
  }

  fetchSomething()
}, [get]) // <-- eslint warns that response.ok is not added to dependency

I'm eslint-disable-line it for now. Is there a suggestion on handling this lint warning?

from use-http.

I haven't had time to try this out yet, but based off of the NOTE portion of the use-deep-compare-effect docs I bet if we wrapped response in useMemo(() => response, []) it might not cause the infinite loop.

from use-http.

That technically works but then eslint will warn that response is missing useMemo's dependencies.

I've also tried with uesRef but had no luck.

from use-http.

I'm still getting linter suggestions that response.ok and get should be in my useEffect dependency list. But adding response.ok to the list causes re-fetching on each render.

Is this the expected behavior? What's the correct way to deal with this?

I'm currently just excluding response.ok from the dependencies, and ignoring the lint errors.

Using use-http version 1.0.16

from use-http.

Try passing response into useEffect

Hi @alex-cory , got the same question. I'm wondering why adding response to useEffect/useCallback dependency won't cause re-render?

Let's say I have three api calls inside the componet

 const { loading, response, get, put } = useFetch();
  const call1= useCallback(async () => {

    const data= await get('endpoint1');
    if (response.ok) {
         
    }
  }, [get, response]);

  const call2= useCallback(async () => {

    const data= await get('endpoint2');
    if (response.ok) {
         
    }
  }, [get, response]);

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

when Call1 fired, the response will be changing, thus will cause a re-render on call2 as well?

from use-http.