React useEffect

The function passed to useEffect will run after the render is committed to the screen. Think of effects as an escape hatch from React’s purely functional world into the imperative world.

The default behavior for effects is to fire the effect after every completed render. You can however conditionally fire the effect by passing a second argument as an array of values. Example: fireWhileImChanging below

1
2
3
4
5
6
useEffect(
() => {
// do something with prop values
},
[fireWhileImChanging],
);
  useEffect(() => {
    const abortController = new AbortController();

    fetch(
      `${REACT_APP_API_URL}/equipment`,
      {
        signal: abortController.signal,
        method: "GET",
        headers: {
          'Accept': 'application/json, text/plain',
          'Content-Type': 'application/json;charset=UTF-8'
      }
    })
    .then(response => response.json())
    .then(json => {
      //console.log(JSON.stringify(json));
      //setEquipment(json);
    })
    .catch(error => console.log(error));

    return () => {
      abortController.abort();
    };
  },[setEquipment]);

YouTube :D

  • React Hooks Tutorial - 1 - Introduction
  • React.js Hooks Crash Course