react functional component is getting called 3 times while fetching data from api async way

Question

I'm new to React and didn't understand why below functional component is getting called 3 times while fetching data from github api

useFetchJobs.js

below file makes call to github job api and fetches data

Here I have console.log(state.jobs); which shows 3 outputs namely

[]
undefined
(50) { }

import { useReducer, useEffect } from 'react';
import axios from 'axios';

const ACTIONS = {
    MAKE_REQUEST: 'make-request',
    GET_DATA: 'get-data',
    ERROR: 'error',
}

const proxyurl = "https://cors-anywhere.herokuapp.com/";

const BASE_URL = 'https://jobs.github.com/positions.json';

function reducer(state, action) {
    switch (action.type) {
        case ACTIONS.MAKE_REQUEST:
            return { loading: true, job: [] }
        case ACTIONS.GET_DATA:
            return { ...state, loading: false, jobs: action.payload.jobs }
        case ACTIONS.ERROR:
            return { ...state, loading: false, error: action.payload.error, jobs: [] }
        default:
            return state;
    }
}


export default function useFetchJobs(params, page) {
    //hook
    const [state, dispatch] = useReducer(reducer, { jobs: [], loading: true })

    //hook
    useEffect(() => {
        const cancelToken = axios.CancelToken.source();

        dispatch({ type: ACTIONS.MAKE_REQUEST })

        axios.get(proxyurl + BASE_URL, {
            cancelToken: cancelToken.token,
            params: { markdown: true, page: page, ...params }
        }).then(res => {
            dispatch({ type: ACTIONS.GET_DATA, payload: { jobs: res.data } })
        }).catch(e => {
            if (axios.isCancel(e)) return
            dispatch({ type: ACTIONS.ERROR, payload: { error: e } })
        })

        return () => {
            cancelToken.cancel();
        }

    }, [params, page])

    console.log(state.jobs);

    return state;
}

APP.js

below file takes data returned from functional component, checks its length and outputs it to screen

import React from 'react';
import { Container } from 'react-bootstrap';

import useFetchJobs from './useFetchJobs.js';

function App() {

  const { jobs, loading, error } = useFetchJobs();


  return (
    <Container>
      {loading && <h1>Loading...</h1>}
      {error && <h1>Error - Reload Again</h1>}
      <h1>{jobs ? '' : '50'}</h1>
    </Container>
  )

}

export default App;

I see 3 output against console.log(state.jobs); inside useFetchJobs.js file

score 1 · Accepted Answer · answered Sep 04 '20 at 11:13

1

[] -> this because when you initially call the useFetchJobs.
undefined -> this because of typo return { loading: true, job: [] } => return { loading: true, jobs: [] }
(50) { } -> this when the state updates.

answered Sep 04 '20 at 11:13

Alibek Taalaibek Uulu

86
1

Thanks, I've fixed type but function call is made only once then why 3 times console.log is getting executed ? – vikramvi Sep 04 '20 at 11:17
When the state updates the function will be updated. That is React Hooks fundamentals. That is the same when the state updates. – Alibek Taalaibek Uulu Sep 04 '20 at 11:21
If you change typo then console.log should be called only twice. At the beginning and after fetching. – Alibek Taalaibek Uulu Sep 04 '20 at 11:23
I've fixed typo but still see 3 calls so wondering why ? – vikramvi Sep 04 '20 at 11:28
Can you please share the console log? – Alibek Taalaibek Uulu Sep 04 '20 at 11:35
Please check attached screenshot in query – vikramvi Sep 04 '20 at 11:42
1

That is because you are doing state updates while you are rendering. Which is dispatch({ type: ACTIONS.MAKE_REQUEST }) Read the following link: https://stackoverflow.com/a/60012293/13061273 – Alibek Taalaibek Uulu Sep 04 '20 at 14:01

react functional component is getting called 3 times while fetching data from api async way

1 Answers1