Why isn't necessary the contextAPI in that case?

Question

I thought that if I want to pass a state in another component, it is possible only through props or with contextAPI (provider etc). For example:

import { createContext, useState, useContext } from 'react';

const FavContext = createContext();
//now we have a context object

function FavProvider(props) {
  //create the provider and its functionality
  const shape = {
    type: '', //films, planets, people
    id: 0, //id of film, or planet, or person
    data: {}, //the actual data object
  };
  const [fav, setFav] = useState(shape);

  function updateFav(type, id, data) {
    setFav({
      type,
      id,
      data,
    });
  }
  return <FavContext.Provider value={[fav, updateFav]} {...props} />;
}

function useFav() {
  //for pages that want to access the context object's value
  //custom hook use...
  const context = useContext(FavContext);
  if (!context) throw new Error('Not inside the Provider');
  return context; // [fav, updateFav]
}
export { useFav, FavProvider };

I wrap all the other components with the FavProvider, then I use the useFav wherever I want.

Here is a code without the contextAPI, and it works. Why is that? Why isn't necessary the contextAPI in that case?

import { useEffect, useState } from 'react';
import { getAuth, onAuthStateChanged } from 'firebase/auth';

export default function useAuthStatus() {
  const [loggedIn, setLoggedIn] = useState(false);
  const [checkingStatus, setCheckingStatus] = useState(true);
  useEffect(() => {
    const auth = getAuth();
    onAuthStateChanged(auth, (user) => {
      if (user) {
        setLoggedIn(true);
      }
      setCheckingStatus(false);
    });
  });
  return { loggedIn, checkingStatus };
}

and when I want to use the loggedIn and chekingStatus, I just bring it in like this:

import { Navigate, Outlet } from 'react-router-dom';
import useAuthStatus from '../hooks/useAuthStatus';
import Spinner from './Spinner';

export default function PrivateRoutes() {
  const { loggedIn, checkingStatus } = useAuthStatus();
  if (checkingStatus) {
    return <Spinner />;
  }

  return loggedIn ? <Outlet /> : <Navigate to='/sign-in' />;
}

Answer 1

Why did you use an array to pass the state through the value in the context API?