title: Data not reloading until refresh reactJS
body: <p>I am currently building a website with two views in which a user can toggle between both views (images seen below) On both views I am allowing a user to update a database and both views display data regarding the state of that database. However, when I update the data on one toggle view of the data and switch to the other view, I can't see the updated data until I refresh.
  I am wrapping my react application around this user context provider shown below</p>
  <pre><code>  const [isLoading, setIsLoading] = useState(true);
    const [isAuthenticated, setIsAuthenticated] = useState(false);
    const [user, setUser] = useState();
    const [courseList, setCourseList] = useState();
    const [semesterList, setSemesterList] = useState();
    const [userMajor, setMajor] = useState();
    const checkContext = useCallback(() =&gt; {
      axios
        .get(&quot;/auth/check&quot;, { withCredentials: true })
        .then(({ data }) =&gt; {
          if (data.auth) {
            setIsAuthenticated(true);
            setUser(data.user);
            setCourseList(data.courseList);
            setSemesterList(data.semesterList);
            setMajor(data.major);
            setIsLoading(false);
          } else {
            setIsAuthenticated(false);
            setMajor(undefined);
            setCourseList(undefined);
            setSemesterList(undefined);
            setUser(undefined);
            setIsLoading(false);
          }
        })
        .catch(() =&gt;
          console.log(
            &quot;Something went wrong while trying to fetch your auth status.&quot;
          )
        );
    }, []);
  
    useEffect(() =&gt; {
      checkContext();
    }, [checkContext]);
  
    return (
      &lt;UserContext.Provider
        value={{
          isLoading,
          isAuthenticated,
          user,
          courseList,
          semesterList,
          userMajor,
          checkContext,
        }}
      &gt;
        {children}
      &lt;/UserContext.Provider&gt;
    );
  };
  
  export default UserContextProvider;
  </code></pre>
  <p>This is where I toggle between views</p>
  <pre><code>const Home = () =&gt; {
    const [selected, setSelected] = useState(false);
    const handleChange = () =&gt; {
      setSelected(!selected);
      setSelected(!selected);
    };
  
    let view;
    if (!selected) {
      view = &lt;CardView /&gt;;
    } else {
      view = &lt;SemesterView /&gt;;
    }
    return (
      &lt;&gt;
        &lt;ToggleButton
          className=&quot;toggler&quot;
          value=&quot;toggle&quot;
          selected={selected}
          onChange={handleChange}
        &gt;
          &lt;ViewModuleIcon /&gt;
        &lt;/ToggleButton&gt;
        {view}
      &lt;/&gt;
    );
  };
  
  export default Home;
  </code></pre>
  <p>For keeping this shorter, here is one of views in which I update the database using a checkbox form.</p>
  <pre><code>const Home = () =&gt; {
    const { courseList } = useContext(UserContext);
  
    const initialMajorState = {
      majorName: &quot;&quot;,
      majorCode: &quot;&quot;,
      majorComponentFamilies: [],
    };
  
    const [majorData, setMajorData] = useState(initialMajorState);
    const [checkedCourses, setCheckedCourses] = useState(courseList);
    const [componentLimit, setComponentLimit] = useState([]);
    const [componentFamilyLimit, setComponentFamilyLimit] = useState([]);
    const [isLoadingData, setIsLoadingData] = useState(true);
  
    /**
     * updates the checked courses, the database, as well as the limits for both components and componentfamilys
     * @param checkedCourse is the course that is being checkedd
     * @param checkedComponentName is the course family name that is being updated
     * @param componentIndex is the course component to which the course belongs to
     * @param componentFamilyIndex is which componentFamily the course belongs to
     */
    const handleOnChange = (
      checkedCourse,
      checkedComponentName,
      componentIndex,
      componentFamilyIndex
    ) =&gt; {
      // copy the componentLimit array
      const updatedComponentLimit = [...componentLimit];
      // copy the componentFamilyLimit array
      const updatedComponentFamilyLimit = [...componentFamilyLimit];
  
      const updatedCheckedCourses = checkedCourses?.includes(checkedCourse)
        ? checkedCourses?.filter((name) =&gt; name !== checkedCourse)
        : [...(checkedCourses ?? []), checkedCourse];
  
      let difference = updatedCheckedCourses.filter(
        (x) =&gt; !checkedCourses.includes(x)
      );
  
      // This means that we added the course
      if (difference.length &gt; 0) {
        // Add the course to the databas
        UserCourseService.add(checkedCourse);
        // Add the course to the checked list for that component
        updatedComponentLimit[componentIndex].checked.push(checkedCourse);
        // if that component is now satisfied then we want to add that to the component family's satisfied components
        if (
          updatedComponentLimit[componentIndex].checked.length &gt;=
          updatedComponentLimit[componentIndex].limit
        ) {
          updatedComponentFamilyLimit[
            componentFamilyIndex
          ].checkedComponentFamily.push(checkedComponentName);
        }
      }
      // if the difference length is none then that means we unchecked a box
      else {
        // Delete the course from our database
        UserCourseService.delete(checkedCourse);
  
        // Add the course to the updatedComponentLimit array at the component index where course lies
        updatedComponentLimit[componentIndex].checked.pop(checkedCourse);
  
        // Pop that component family (pop will return null if not found anyways)
        updatedComponentFamilyLimit[
          componentFamilyIndex
        ].checkedComponentFamily.pop(checkedComponentName);
      }
  
      // set the componentFamilyLimit array and componentLimit array and checked courses
      setComponentLimit(updatedComponentLimit);
      setComponentFamilyLimit(updatedComponentFamilyLimit);
      setCheckedCourses(updatedCheckedCourses);
    };
  
    /**
     * returns a boolean determining if a checkbox is disabled or not
     * @param course deals with which course we are checking should be disabled or not
     * @param componentIndex deals with which component we are looking at
     * @param componentFamilyIndex deals with which compoentFamily we are looking at
     */
    const isDisabled = (course, componentIndex, componentFamilyIndex) =&gt; {
      // if the component family limit has been reached then just return if the checkbox has already been checked
      if (
        componentFamilyLimit[componentFamilyIndex].checkedComponentFamily
          .length &gt;= componentFamilyLimit[componentFamilyIndex].limit
      )
        return componentLimit[componentIndex].checked.indexOf(course) === -1;
      // if the component family limit has not been reached then check if the component itself has been meet and
      // if the element has been checked already
      else {
        return (
          componentLimit[componentIndex].checked.length &gt;=
            componentLimit[componentIndex].limit &amp;&amp;
          // If not already checked
          componentLimit[componentIndex].checked.indexOf(course) === -1
        );
      }
    };
  
    /**
     * gets the data after searching for a course in the searchbar from the backend. Initializes the limit arrays and checked courses
     * @param query is the name of the major we are getting data from in the backend
     */
    const getData = async (query) =&gt; {
      // Initializing the state for our global hooks in this function
      var newCheckedComponentList = [];
      var newCheckedComponentFamilyList = [];
  
      // gets the response data in regards to the major we are interested in from the backend
      MajorDataService.find(query)
        .then((response) =&gt; {
          // sets the major data to the response data
          setMajorData(response.data);
  
          // if the data exists then we want to initialize the other stuff
          if (response.data.majorComponentFamilies) {
            // Looping through the component families
  
            response.data.majorComponentFamilies.forEach((componentFamily) =&gt; {
              // gets the limit from the component family
              var componentFamilyLimit = parseInt(
                componentFamily.required_num_components
              );
              var newComponentFamilyList = [];
  
              // Loops through each of the components in each component family
              componentFamily.component_list.forEach((component) =&gt; {
                // courselimit on each component
                var courseLimit = parseInt(component.required_num_courses);
  
                // the course list for a component
                var newUserCourseList = [];
  
                // Loops through all of the courses in each component
                component.course_list.forEach((course) =&gt; {
                  // if the courselist includes the course then add that to the course list
                  if (courseList.includes(course)) {
                    newUserCourseList.push(course);
                  }
                });
                // Add to the checked array for components
                newCheckedComponentList.push({
                  checked: newUserCourseList,
                  limit: courseLimit,
                });
                if (newUserCourseList.length === courseLimit) {
                  newComponentFamilyList.push(component.component_name);
                }
              });
              newCheckedComponentFamilyList.push({
                checkedComponentFamily: newComponentFamilyList,
                limit: componentFamilyLimit,
              });
            });
            setComponentLimit(newCheckedComponentList);
            setComponentFamilyLimit(newCheckedComponentFamilyList);
            setIsLoadingData(false);
          }
        })
        .catch((e) =&gt; {
          console.log(e);
        });
    };
  
    const renderCourseRequirements = (
      requiredCourses,
      componentIndex,
      componentFamilyIndex,
      componentFamilyName
    ) =&gt; {
      return (
        &lt;Grid container spacing={1} key={[uuid()]}&gt;
          {requiredCourses.map((course, index) =&gt; {
            return (
              &lt;Grid key={[uuid()]} item xs={6} lg={4} xl={4}&gt;
                &lt;Card
                  key={[uuid()]}
                  className={
                    checkedCourses.includes(course)
                      ? &quot;CourseCardCompleted&quot;
                      : &quot;CourseCard&quot;
                  }
                  variant=&quot;outlined&quot;
                &gt;
                  &lt;CardHeader
                    key={[uuid()]}
                    action={
                      &lt;Checkbox
                        name={course}
                        value={course}
                        className=&quot;header&quot;
                        disabled={isDisabled(
                          course,
                          componentIndex,
                          componentFamilyIndex
                        )}
                        checked={checkedCourses.includes(course)}
                        onChange={() =&gt;
                          handleOnChange(
                            course,
                            componentFamilyName,
                            componentIndex,
                            componentFamilyIndex
                          )
                        }
                      /&gt;
                    }
                    title={
                      &lt;Typography
                        key={[uuid()]}
                        className=&quot;CourseTitle&quot;
                        color=&quot;textSecondary&quot;
                        gutterBottom
                      &gt;
                        {course}
                      &lt;/Typography&gt;
                    }
                  &gt;&lt;/CardHeader&gt;
                  &lt;CardContent key={[uuid()]} className=&quot;content&quot;&gt;&lt;/CardContent&gt;
                &lt;/Card&gt;
              &lt;/Grid&gt;
            );
          })}
        &lt;/Grid&gt;
      );
    };
  
    var componentCount = 0;
    const renderComponents = (components, componentFamilyIndex) =&gt; {
      return (
        &lt;Grid
          container
          spacing={1}
          direction=&quot;column&quot;
          alignItems=&quot;center&quot;
          justifyContent=&quot;center&quot;
          key={[uuid()]}
        &gt;
          {components.map((component, index) =&gt; {
            var temp_index = componentCount;
            componentCount = componentCount + 1;
            return (
              &lt;Grid key={[uuid()]} item className=&quot;grid&quot; xs={12} lg={4} xl={2}&gt;
                &lt;Card
                  key={[uuid()]}
                  className={
                    componentLimit[temp_index].checked.length &gt;=
                    componentLimit[temp_index].limit
                      ? &quot;ComponentCardCompleted&quot;
                      : &quot;ComponentCard&quot;
                  }
                  variant=&quot;outlined&quot;
                &gt;
                  &lt;CardContent key={[uuid()]}&gt;
                    &lt;Typography
                      key={[uuid()]}
                      className=&quot;ComponentTitle&quot;
                      color=&quot;textSecondary&quot;
                      gutterBottom
                    &gt;
                      {component.component_name}
                    &lt;/Typography&gt;
                    &lt;Typography
                      key={[uuid()]}
                      className=&quot;pos&quot;
                      color=&quot;textSecondary&quot;
                    &gt;
                      Required # of Courses: {component.required_num_courses}
                    &lt;/Typography&gt;
                    {renderCourseRequirements(
                      component.course_list,
                      temp_index,
                      componentFamilyIndex,
                      component.component_name
                    )}
                  &lt;/CardContent&gt;
                &lt;/Card&gt;
              &lt;/Grid&gt;
            );
          })}
        &lt;/Grid&gt;
      );
    };
  
    const renderComponentFamilies = (majorComponentFamilies) =&gt; {
      return (
        &lt;Masonry className=&quot;masonry&quot; columns={3} spacing={2} key={[uuid()]}&gt;
          {majorComponentFamilies.map((componentFamily, index) =&gt; {
            if (componentFamily.component_list.length &gt; 1)
              return (
                &lt;Card
                  key={[uuid()]}
                  className={
                    componentFamilyLimit[index].checkedComponentFamily.length &gt;=
                    componentFamilyLimit[index].limit
                      ? &quot;ComponentFamilyCardCompleted&quot;
                      : &quot;ComponentFamilyCard&quot;
                  }
                  variant=&quot;outlined&quot;
                &gt;
                  &lt;CardContent key={[uuid()]}&gt;
                    &lt;Typography
                      key={[uuid()]}
                      className=&quot;ComponentFamilyTitle&quot;
                      color=&quot;textSecondary&quot;
                      gutterBottom
                    &gt;
                      {componentFamily.component_family_name}
                    &lt;/Typography&gt;
                    &lt;Typography
                      key={[uuid()]}
                      className=&quot;pos&quot;
                      color=&quot;textSecondary&quot;
                    &gt;
                      Required # of Components :{&quot; &quot;}
                      {componentFamily.required_num_components}
                    &lt;/Typography&gt;
                    {renderComponents(componentFamily.component_list, index)}
                  &lt;/CardContent&gt;
                &lt;/Card&gt;
              );
            return (
              &lt;div key={[uuid()]}&gt;
                {renderComponents(componentFamily.component_list, index)}
              &lt;/div&gt;
            );
          })}
        &lt;/Masonry&gt;
      );
    };
    return (
      &lt;div className=&quot;container home&quot;&gt;
        &lt;SearchBar
          key={[uuid()]}
          placeholder=&quot;Enter Major Name ...&quot;
          data={MajorNames}
          onChange={(value) =&gt; getData(value)}
        /&gt;
        &lt;div className=&quot;mui-grid&quot;&gt;
          {Array.isArray(majorData.majorComponentFamilies) &amp;&amp;
          majorData.majorComponentFamilies.length &gt; 0 &amp;&amp;
          !isLoadingData ? (
            &lt;&gt;
              &lt;h1&gt;{majorData.majorName} &lt;/h1&gt;
              {renderComponentFamilies(majorData.majorComponentFamilies)}
            &lt;/&gt;
          ) : (
            &lt;&gt;&lt;/&gt;
          )}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>