React: React Hooks don't work inside function without export default.

[Octavians98]

Hello, I'm trying to call the useContext hook inside a function and I get the following error
.
This is the code that I'm trying to make it work using hooks.

`
import {MaterialUIComponentsNavigation} from 'app/main/documentation/material-ui-components/MaterialUIComponentsNavigation';
import {authRoles} from 'app/auth';
import React, {useContext, useState} from "react";
import TextContext from "../TextContext";

export function NavigationConfig () {
const test = useContext(TextContext);
console.log("Navigation",test)
return test;
}
`
And for a reason or another if I change the syntax to export default instead of just export it works. I couldn't find any explanation online (trust me I've tried) and I think this is a bug. My React versions is > 16.8.0 so that's not the issue.

[mikedubcurry]

That function doesn't return anything. You have to return null if you dont want to return anything or else it wont be considered a component

[Octavians98]

That function doesn't return anything. You have to return null if you dont want to return anything or else it wont be considered a component

Sorry, I forgot to insert the return statement.

[hamlim]

How are you using the NavigationConfig function? Can you show a snippet of how you import that component and use it?

[Octavians98]

How are you using the NavigationConfig function? Can you show a snippet of how you import that component and use it?

Sure, here it is.

`

import * as Actions from '../../actions/fuse/index';

import {NavigationConfig} from "../../../fuse-configs/navigationConfig";

const initialState = NavigationConfig();

const navigation = function (state, action) {

switch ( action.type )
{
    case Actions.GET_NAVIGATION:
    {
        return [
            ...state
        ];
    }
    case Actions.SET_NAVIGATION:
    {
        return [
            ...action.navigation
        ];
    }
    case Actions.RESET_NAVIGATION:
    {
        return [
            ...initialState
        ];
    }
    default:
    {
        return state;
    }
}

};

export default navigation;
`

[wukaijin]

const initialState = NavigationConfig();

useContext API should be called within render duration of a functional react component

[Octavians98]

const initialState = NavigationConfig();

useContext API should be called within render duration of a functional react component

You're wrong there, there are multiple ways to call the default hooks. This is a just a helper function, not rendering anything :).

[hamlim]

The point that @wukaijin is making is that if you are ultimately using a hook, you need to call it from within a component. When you call it in the module scope like you are above, the useContext call doesn't know how to resolve the context value (because it's determined based on where it's rendered within the tree of react components).

[threepointone]

@hamlim is right here. A couple of things are happening -

• by calling your function NavigationConfig, the capitalization makes the lint rule believe you're declaring a component. So there's no warning about not calling a hook within a component or custom hook
• by actually calling NavigationConfig as a regular config, outside of a component's scope, the error gets triggered about calling a hook outside of a component. Hooks can only be called inside a component, or inside a custom hook.

Closing since this is a usage issue, but feel free to continue the discussion.