Why get multiple console log outputs from a function in my React app

Question

I created this function in my React app to fetch a url and check the status.

import { useEffect, useState } from 'react';

const fetchStatusCode = (url: string) => {
  const [data, setData] = useState<string | null>(null);

  useEffect(() => {
    const fetchStatus = async () => {
      const response = await fetch(url);
      return response.statusText;
    };

    fetchStatus().then((res) => setData(res));
  }, []);

  return data;
};

export default fetchStatusCode;

I can then use it like this in a component: console.log('Status', fetchStatusCode('http://my-site.com/abc/token'));

In the browser console I get: Status null Status null Status Ok

Is that the intended behaviour? Why get multiple console log outputs (first 2 times null and then OK)?

This is indeed expected behavior. React re-renders the component(s) when relevant state is updated. If this *didn't* happen then all you'd ever get back from this function is `null`, which wouldn't be particularly useful. — David, Nov 02 '22 at 15:50
@David thanks. Because I then use this function to send a custom header with Apollo Client link construtor: `const isOk = fetchStatusCode('http://my-site.com/abc/token') === 'OK';` and use the condition like `headers: { ...headers, 'custom-header': isOk ? 'MyName' : null, },`. So is this function correct for this use case? — meez, Nov 02 '22 at 15:59
The usage seems a bit mis-structured, but if it works in testing then it at least works. Personally I would (1) rename `fetchStatusCode` to something like `useStatusCode` to clearly identify it as a React hook, (2) invoke it at the start of the component as: `const statusCode = useStatusCode('http://my-site.com/abc/token');`, and (3) use `statusCode` as a dependency in a `useEffect` call to conditionally perform the Apollo Client operation. — David, Nov 02 '22 at 16:07
@David [here](https://stackoverflow.com/questions/74292659/create-react-custom-hook-instead-of-helper-function) I created a new question. Hope you can guide me a bit and you see some key points to improve and refactor. Thanks — meez, Nov 02 '22 at 16:34
@David regarding 'statusCode as a dependency in a useEffect'. Can you help me with that in the linked question above? — meez, Nov 03 '22 at 08:09

score 0 · Answer 1 · answered Nov 02 '22 at 15:53

In React, the view flows from the state. Whenever the state changes, the components that it may correspond to will re-render. This will include a component and all of its children, if the component directly uses state with useState inside it - or if the component is using a custom hook and state inside the custom hook changes.

When a component re-renders, the function associated with the component will run again so React can determine what new JSX elements it returns given the different state. So seeing something like

Status null Status null Status Ok

is normal - these must have resulted from

Status null - The parent component just mounted, so there's a log

Status null - The parent component just re-rendered, so its function runs again, and there's a log

Status Ok - The state inside fetchStatusCode just changed, resulting in the parent component re-rendering, resulting in another log

Why get multiple console log outputs from a function in my React app

1 Answers1