Why my component re render so many times?

Question

My react app doesn't so huge project and i decide to not use Redux, so i'm using useReducer hook for state management in useFetch custom hook:

import ...
export const useFetch = (programType) => {
  const [state, dispatch] = useReducer(reducer, Initial_State);
  const { entries, isFetching, errorMessage } = state;

  useEffect(() => {
    dispatch(fetchBegin());

    const fetchData = async () => {
      try {
        await new Promise((resolve, reject) => setTimeout(resolve, 1480)); //testing withSpinner HOC for loading screen.
        const res = await fetch(
          'https://5f706444bdb178001633bf46.mockapi.io/data'
        );
        const dataArray = await res.json();
        dispatch(fetchSuccess(dataArray[0].entries, programType));
      } catch (errorMessage) {
        dispatch(fetchFail(errorMessage));
      }
    };
    fetchData();
  }, [programType]);

  return { entries, isFetching, errorMessage };
};

i am calling useFetch hook in my moviePage component but my component render so many times, console logging render 4 times when component mount and then logging 2 times again.

import ...
const MoviePage = ({ match }) => {
  const data = useFetch('movie');
  const { entries } = data;

  console.log('render');

  return (
    <>
      <RouteTitle title={match.path} />
      {entries.slice(0, 21).map((e) => (
        <div key={e.title}>{e.title}</div>
      ))}
    </>
  );
};

Is this bad pattern for useEffect hook, should use redux with useDispatch and useSelector hooks ?