DataFetchingHook.jsx

// Hook reducer
const reducer = (state, action) => {
  switch(action.type) {
    case 'initial data':
      return action.payload;
  }
}

// Hook actions
const fetchData = async () => {
  const response = await fetch('https://aws.random.cat/meow');
  const data = await response.json();
  return data;
}

// Component
const Hello = () => {
  const [state, dispatch] = React.useReducer(reducer, { file: null });

  React.useEffect(() => {
    fetchData().then((response) => {
      dispatch({
        type: 'initial data',
        payload: response
      });
    });
  }, []);

  return (
    <div>
      {data.file ? <img src={data.file} /> : <p>loading...</p>}
    </div>
  )
}