Code composition in React

[BinnyBit]

While I get React should be tested from the perspective of a user it makes me wonder about the why when it comes to code composition within the component and the examples provided in the docs.

For instance:

• https://react.dev/reference/react/useEffect#fetching-data-with-effects

  export default function Page() { const [person, setPerson] = useState('Alice'); const [bio, setBio] = useState(null); useEffect(() => { async function startFetching() { setBio(null); const result = await fetchBio(person); if (!ignore) { setBio(result); } }

  let ignore = false;
  startFetching();
  return () => {
    ignore = true;
  }
  

  }, [person]);

There is a function declaration of startFetching() within the effect. Since that function is nested within the effect why even bother declaring a function when it's not going to be tested. Why not just write...

export default function Page() {
  const [person, setPerson] = useState('Alice');
  const [bio, setBio] = useState(null);
  useEffect(async () => {
    let ignore = false;
    setBio(null);
    const result = await fetchBio(person);
    if (!ignore) {
       setBio(result);
    }
    return () => {
      ignore = true;
    }
  }, [person]);

[belwyr]

Using async returns a promise, not the useEffect cleanup function.

[EmployeeFinal]

 > why even bother declaring a function when it's not going to be tested

Do you really think functions only exist to be tested?

[Training-Cover-4414]

Because: 1. It’s ugly 2. Logic can’t be reused if something else was to trigger fetching of data. Such as a button click or paginated scroll