16.comboOFuseEffectAnduseReducer.md

"The Perfect Combo: useReducer and useEffect for Powerful React Components"

Here is an example of how the useEffect and useReducer hooks can be used together to manage complex state and perform side effects in a React component:

import { useEffect, useReducer } from "react";

const initialState = {
  loading: false,
  data: [],
  error: null,
};

function reducer(state, action) {
  switch (action.type) {
    case "LOADING":
      return {
        loading: true,
        data: [],
        error: null,
      };
    case "SUCCESS":
      return {
        loading: false,
        data: action.data,
        error: null,
      };
    case "ERROR":
      return {
        loading: false,
        data: [],
        error: action.error,
      };
    default:
      throw new Error("Invalid action type");
  }
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    dispatch({ type: "LOADING" });

    fetch("https://my-api.com/endpoint")
      .then((response) => response.json())
      .then((data) => dispatch({ type: "SUCCESS", data }))
      .catch((error) => dispatch({ type: "ERROR", error }));
  }, []);

  if (state.loading) {
    return <p>Loading...</p>;
  }
  if (state.error) {
    return <p>Error: {state.error.message}</p>;
  }
  return (
    <ul>
      {state.data.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

In this example, the useReducer hook is used to manage the loading, data, and error state of a component that is fetching data from an API. The useEffect hook is used to perform the actual fetch request and dispatch actions to the reducer to update the state accordingly. The component will display a loading message while the data is being fetched, an error message if there is an error, or a list of data items if the fetch is successful.