Why are creatContext and useReducer hooks not included in React lecture

I had taken a react course before taking the one on codecademy. I usually use createContext from react and useReducer when managing state. Everything seem easy to do.
However, the react course on fullstack engineer path makes thing a bit complicated. I’m not sure which way of doing thing I should stick to.

I didn’t have to use createSlice to create a reducer or dispacth action (Don’t get me wrong, I think this is a useful method). However, I think useReducer hook is also a great method but was not included in this lecture not even createContext. I

Below is the way I would have liked to structure my react State code:

                        // GithubState.js

import React, {useReducer} from 'react';
import axios from 'axios';
import GithubReducer from './GithubReducer';
import GithubContext from './GithubContext';

import {
  LOAD_USERS,
  GET_SINGLEUSER,
  GET_SINGLEUSER_REPOS,
  SEARCH_USERS,
  CLEAR_USERS,
  SET_LOADING,
  // SHOW_ALERT,
  // REMOVE_ALERT
} from '../Type';

let githubClientId;
let githubClientSecret;

if(process.env.NODE_ENV === "production"){
  githubClientId = process.env.REACT_APP_GITHUB_CLIENT_ID;
  githubClientSecret = process.env.REACT_APP_GITHUB_CLIENT_SECRET
}else {
  githubClientId = process.env.GITHUB_CLIENT_ID;
  githubClientSecret = process.env.GITHUB_CLIENT_SECRET;
}

export const GithubState = (props) => {
  const initialstate = {
    users: [],
    singleUser: {},
    singleUserRepos: [],
    loading: false
  }

  const [state, dispatch] = useReducer(GithubReducer, initialstate);

  const setLoading = () => dispatch({
      type: SET_LOADING
    })
  
    // Load Users
    const loadUsers = async() =>{
      setLoading();
    const resp = await axios.get(`https://api.github.com/users?client_id=${githubClientId}&client_secret=${githubClientSecret}`);

    dispatch(
      {
        type: LOAD_USERS,
        payload: resp.data
    }
    )
  }
    // Search Users
    const searchUsers = async (text) =>{
      setLoading();
      const resp = await axios.get(`https://api.github.com/search/users?q=${text}&client_id=${githubClientId}&client_secret=${githubClientSecret}`);
  
      dispatch(
        {
          type: SEARCH_USERS,
          payload: resp.data.items,
        }
      );
    }
// Clear users
 const clearUsers = () =>{
    dispatch({
     type: CLEAR_USERS
    })
  }

    // Get single user
    const getSingleUser = async (username) => {
      setLoading();
      const resp = await axios.get(`https://api.github.com/users/${username}?&client_id=${githubClientId}&client_secret=${githubClientSecret}`);
  
      dispatch({
        type: GET_SINGLEUSER,
        payload: resp.data
      })
      
    }

    // Get Single user repos
    const  getSingleUserRepos = async (username) => {
    setLoading();
      const resp = await axios.get(`https://api.github.com/users/${username}/repos?per_page=5&sort=created:asc&client_id=${githubClientId}&client_secret=${githubClientSecret}`);
  
      dispatch({
        type: GET_SINGLEUSER_REPOS,
        payload: resp.data
      });
      
    }
  return (
    <GithubContext.Provider value ={
      {
        users: state.users,
        singleUser: state.singleUser,
        singleUserRepos: state.singleUserRepos,
        loading: state.loading,
        loadUsers,
        searchUsers,
        clearUsers,
        getSingleUser,
        getSingleUserRepos
      }
    } >
    {props.children}

    </GithubContext.Provider>
  )
}

export default GithubState;

I agreed with you, they should include that too. I had also taken the course I am building my own projects now.

I can only speculate…

The majority of the React content on Codecademy focuses on class components, and there’s only a relatively small amount on functional components and hooks. Hooks are a relatively new thing in React, and the extra methods you’ve mentioned aren’t as commonly used as the ones taught in the course. It’s not just codecademy - most tutorials and information on React - including the official documentation - put more emphasis on using class components to manage state. There is a shortage of good lessons/tutorials/info about using functional components exclusively. I’d be interested to know what react course you did prior to this, as I’ve done some other react courses and tutorials too, and don’t think I’ve come across createContext or useReducer in them - would love to learn more.

Codecademy also teaches Redux, which is used for state management, so perhaps these hooks or an alternative are taught in the Redux content.

1 Like

On the other hand, I’ve seen a lot of React examples using functional components, and I think most developers prefer functional components to class components. Also, there’s a quite considerable number of examples that use the Context API.
Check this: Video

The Context API (useContext + useReducer hooks) are not included in the React course.

1 Like

Yes, I agree in terms of trends, best practices, and where the future of React is, functional components and hooks are the way to go. I have also found it frustrating that while I really want to skill up and practice functional components, the majority of the projects I’ve done on codecademy are using class components.

What I meant by my earlier speculation is, I don’t think course materials and documentation have caught up with functional components and hooks (here at Codecademy or elsewhere). A lot of the course material was probably developed prior to hooks being a stable release or trending, and as such the material on hooks is pretty slim, and just the basics (not the more advanced hooks you’ve used).

Their thinking could also be that there’s a lot of legacy code that was written with class components, so if you get a job working on an existing codebase built in React, it will mean working with a lot of class components even if new code is being written with functional components…

…or they just haven’t updated their courses…

Thanks for sharing the video, I definitely want to learn more about the additional hooks, and appreciate you for making me aware of them :slight_smile:

2 Likes

Yeah, that might be the case.