educative.io

Is this a good practice on React Hooks?

Courses
,
#1

I have that question, because I think you can use it in its parent instead of break into a new component (User in this case) which returns “null” and fetch a dispatch new changes to the context reducers.

I mean, this is not a bad idea, however is it a good practice ?
I see it as a composition but it is not a custom hook at all.

import { useContext, useEffect } from 'react';
import { fetchProfile } from '../api.mock';
import PropTypes from 'prop-types';
import { StoreContext } from '../App';

export const User = ({ userType }) => {
  const [, dispatch] = useContext(StoreContext);
  useEffect(() => {
    const loadProfile = async () => {
      const profile = await fetchProfile(userType);
      dispatch({
        type: 'REFRESH_PROFILE',
        profile
      });
    };
    loadProfile();
  }, [userType, dispatch]);

  return null;
};

User.propTypes = {
  userType: PropTypes.string
};

Type your question above this line.

Course: https://www.educative.io/collection/4689062322503680/4508623498641408
Lesson: https://www.educative.io/collection/page/4689062322503680/4508623498641408/5562009006374912