CODEWITHSUNDEEP
javascriptreactjsaxiosreact-hooksuse-effect
programmer123
programmer123

Reputation: 121

How to fetch data without useEffect hooks in React function component?

I know the conventional way when using hooks is to fetch the data using the useEffect hook. But why can't I just call axios in the functional component instead of a hook and then set the data.

Basically, I am asking what is wrong with doing this:

const [users, setUsers] = useState(null);
axios.get("some api call")
  .then(res => setUsers(res.data))

Here, I do not use useEffect, what could go wrong?

Upvotes: 9

Views: 12076

Answers (4)

watashi
watashi

Reputation: 1

I dont believe that useEffect is the best practice. it will actually call it twice if on strict mode. the solution for this is use useQuery library.

Upvotes: 0

Richard
Richard

Reputation: 121

Prefer useEffect(() => code... , []).

That said, you can also do it while avoiding an infinite loop but it's a very bad practice and I don't recommend it.

Yes, you will have a re-render but you won't have an infinite loop. Use useState's lazy init function.

const [users, getUsers] = useState(() => {
   axios.get("some api call")
     .then(res => getUsers(res.data))
});

Upvotes: 3

S. Hesam
S. Hesam

Reputation: 6643

Best practice is :

const [users,getUsers]= useState();
useEffect ( () => {
   axios.get("some api call")
  .then(res=>getUsers(res.data))
}, []);

Upvotes: -1

cbr
cbr

Reputation: 13652

Making a request and changing the state on render like that will cause the component to re-render forever.

Every time the component renders, e.g. due to props changing or due to hooks changing, that axios.get request gets called. When it gets a response, it will update the state. Then, because the state has changed, the component re-renders, and axios.get is called again. And the state changes again, and the request is made again, forever.

Upvotes: 4

Related Questions