Why I'm getting 2 rendered using this hook, when component mounts?

[gremo]

Plain simple:

import React from 'react';
import useAxios from 'axios-hooks';

export const Products = () => {
  const [{ data, loading, error }] = useAxios({
    url: 'https://dummyjson.com/products',
  }, { useCache: false });

  return (<div></div>);
}

The profiler shows 3 renders: first one it's the initial rendering. Second and third are from "Hook 8 changed". Why?

Hook 8 is:

[simoneb]

because react 18 renders twice in development mode. https://stackoverflow.com/questions/72238175/useeffect-is-running-twice-on-mount-in-react

[gremo]

@simoneb not sure about that. I use for testing another hook (use-http):

const { loading, error, data } = useFetch('https://dummyjson.com/products', {}, []);

Why this hook only trigger 1 render? Two in total...

[simoneb]

can you provide a repro?

[gremo]

@simoneb I really appreciate your work, and OS software in general. For me, and maybe for you, it's more than a work. So I suggest you not to close an issue after five minutes, making assumptions about other's project/setup.

Yes, I maybe a beginner in React but I'm not completely dumb.

1. Yes, I'm using React 18 (but you didn't know)
2. I'm not using strict mode, neither in that component nor up the tree (but you didn't know)
3. Either way, I would have noticed already the double rendering, elsewhere in my app

• 3 rendering using useAxios sandbox

• 2 rendering using useFetch sandbox

[simoneb]

I see your point, I had assumed React 18 was the cause. I've had a look at your repro and it looks legit. This seems to be causes by an improper handling of the state of the initial request.

Would you be interested in submitting a PR to fix this?

[gremo]

@simoneb thanks but I really can't, my experience with React isn't advanced yet! Hope to see a fix soon (or revert to a previous version maybe?)

[gremo]

Any update @simoneb ?

[simoneb]

@gremo I didn't have a chance to look into it, but why don't you give it a go? I think it might be pretty simple. If the new state object is the same as the existing, don't change the state :)

[Paola3stefania]

Hello ! For what we have been researching with @Cherrerotinoco It has to be with how the initialState its hanlded with manual false (automatic ), you can prevent this refetching error with (manual: true) while waiting for a new PR