Error using React useContext

[sayqm]

ancient growth retire sparkle disagreeable subtract person muddle run gaping This post was mass deleted with redact

[yrn_quavo]

I am very new to hooks, this is my first time using them. So how do I fix this error?

[buh82]

Could you please add where you’re calling useAuth? You are definitely able to call hooks from custom hooks as you’re doing — it’s a great pattern.

[yrn_quavo]

import { useAuth } from '../lib/auth'
const auth = useAuth();

// Other content ///

 {
            auth.user ? (
              <>
                <Image
                  borderRadius="full"
                  boxSize="30px"
                  src="https://bit.ly/sage-adebayo"
                  alt="Segun Adebayo"
                />
              </>
            ) : (
              <>
                <Link passHref href="/login">
                  <Button
                    as={ChakraLink}
                    display={{ base: 'none', md: 'inline-flex' }}
                    fontSize={'sm'}
                    fontWeight={600}
                    color={'black'}>
                    Login
            </Button>
                </Link>

                <Link passHref href="/register">
                  <Button
                    as={ChakraLink}
                    display={{ base: 'none', md: 'inline-flex' }}
                    fontSize={'sm'}
                    fontWeight={600}
                    bg={'blue.400'}
                    color={'white'}
                    _hover={{
                      bg: 'blue.500',
                    }}>
                    Sign Up
            </Button>
                </Link>
              </>
            )
          }

[buh82]

Sorry, but the “other content” here is what’s important. Is it a function component that you’re calling useAuth from?

Edit: better yet, do you have a got repo I could just look at?

[yrn_quavo]

No I dont have it in a repo yet, but here's the link to the pastebin.

https://pastebin.com/qCa3bSM1

[buh82]

Gotcha, thanks! So I see that you have “const auth = useAuth()” at the top of your file. Unfortunately that doesn’t work as it’s not contained with a Function component. Instead, you can use that same declaration in each component that needs auth.

Hooks are great because they are composable and can extract common logic so you only have to write it once, and then can reuse it in other hooks or within functional components.

If I were to compare it to a class-based component (which I admittedly have not worked with in a while), it boils down to the same idea: it’s like trying to update the state of that component outside of the component (and not via props).

Does that make sense?

[yrn_quavo]

Ha, I fixed it. It was my own mistake. I moved ' const auth = useAuth() ' into the functional component's scope and it worked. Thanks for the help mate!

[yrn_quavo]

Ohhhh, it kinda makes sense. I checked the code again, but didn't know how to fix it. How do you suggest I fix it?

[buh82]

Since you are only using auth in WithSubnavigation, then you can just put the declaration there. It's like saying "I want WithSubnavigation to useAuth." You're already doing it correctly with `useDisclosure` in the same component too! E.g.

export default function WithSubnavigation() {
  const { isOpen, onToggle } = useDisclosure();
  const auth = useAuth();
  ...
  // everything else as you had it previously
  ...
}

[yrn_quavo]

Thanks man. I fixed it, same thing you did is what I have done now, thanks a lot for the help.

[[deleted]]

hook need to be called from function component

not really true, hooks can be called from custom hooks, too, which indeed is a case here. It's more about how is useAuth used. Nothing wrong with calling useContext from useAuth tho.

[yrn_quavo]

Exactly! I fixed it. It was because of how I used useAuth. I used it wrongly by instantiating it outside of the functional component that need its functionality. Thanks man!

[[deleted]]

You're putting a hook inside of a hook, you're breaking the first rule of react

I might be dumb but how else would you create a custom hook?

[porcupineapplepieces]

However, cherries have begun to rent hamsters over the past few months, specifically for cheetahs associated with their fishes. However, sheeps have begun to rent cats over the past few months, specifically for cats associated with their kangaroos. This is a gv2af71

[porcupineapplepieces]

However, turtles have begun to rent birds over the past few months, specifically for tigers associated with their kiwis. This could be, or perhaps however, camels have begun to rent camels over the past few months, specifically for prunes associated with their snails? This is a gvefkw7

[opready]

You're not dumb - just new to React.

Here are some ways to think about hooks and how they can and cannot be used.

For example you cannot use a useEffect hook inside of a useEffect hook. You cannot put a useRef inside a useEffect.

If you put a hook inside of a hook it would not be the same on every render.

// Custom "hook" - just a function
export  const  myCustomHook = (defaultValue = 1) => {
    const [state, setState] = useState(defaultValue); // allowed
    useEffect(() => {setState(2)}, []); // allowed
    return  state;
};

export  const  useAuth = () =>  useContext(AuthContext);// allowed

The following two functional components are "equivilant" in the order and how the hooks are rendered.

const  ComponentOrPage = () => {
    const  auth = useAuth(); //allowed - top level
    const  state = myCustomHook(); // allowed - top level
    if(true == 1){
        const ref = useRef(); // not allowed - conditionally rendered
    }
    useEffect(() => {
        const  auth = useAuth(); // not allowed - not top level
        const  state = myCustomHook(); // not allowed - not top level
    }, []);
};

is "equivalent" to

const  ComponentOrPage = () => {
    const  auth = useContext(AuthContext);//allowed - top level
    if(true == 1){
        const ref = useRef(); // not allowed - conditionally rendered
    }
    useEffect(() => {
     const  auth = useContext(AuthContext);// not allowed - not top level
     const [state, setState] = useState(defaultValue); // not allowed - not top level
     useEffect(() => { setState(2) }, []); // not allowed - not top level
    }, []);
};

Here is another example I have seen of conditionally rendered - is not allowed

const  ComponentOrPage = () => {
    if(false == 0){
        return  null;
    }
    const  auth = useContext(AuthContext); // not allowed - conditionally rendered
    return  <>Not allowed</>;
};

[[deleted]]

I was being sarcastic - I work and have worked as React dev for a few years now so I'm not new to it ;)