I have a custom hook that processes a certain state variable.

Whenever you change the state It does not update immediately so I have to subscribe to it using useEffect.

However it is categorically impossible to call a custom hook within useEffect.

How does one get their custom hooks to do anything at all with a state variable?

I have a custom hook that processes a certain state variable.

Whenever you change the state It does not update immediately so I have to subscribe to it using useEffect.

However it is categorically impossible to call a custom hook within useEffect.

How does one get their custom hooks to do anything at all with a state variable?

• javascript
• reactjs
• typescript

• 1 Please visit help center, take tour to see what and How to Ask a good question. Do some research, search for related topics on Stackoverflow; if you get stuck, post a minimal reproducible example. – Always Helping Commented Feb 3, 2021 at 4:45
• Why can't you call your custom hook in an useEffect hook? Hooks can be called from the body of functional ponents and other hooks. What have you tried? Please share a minimal, plete, and reproducible code example. – Drew Reese Commented Feb 3, 2021 at 4:49
• 1 @DrewReese this appears to be a follow up from a previous question: stackoverflow./questions/66020140/… – Jacob Smit Commented Feb 3, 2021 at 5:04
• So, seems this question should be closed/deleted then and conversation moved back to the original question? – Drew Reese Commented Feb 3, 2021 at 5:11
• This question is a more general design pattern about react. My previous question is a particular example looking for a work-around. And no, you can't run a custom hook inside useEffect, because that in itself is a hook. – Raven Commented Feb 3, 2021 at 5:14

1 Answer 1

You can not (should not) call a custom hook inside of useEffect, but you can use useEffect inside of your custom hook:

const useMyHook = function( someState ){
    useEffect( function(){
        // do what the hook should do
    }, [ someState ]);
};

If the hook should update also when something else changes, you can just pass that as well:

const useMyHook = function( someState, someDependency ){
    useEffect( function(){
        // do what the hook should do
    }, [ someState, someDependency ]);
};

I suggest to use an array for the dependencies, so that it works similar to useEffect:

const useMyHook = function( label, dependencies ){

    const [ value, setValue ] = useState(0);

    useEffect( function(){
        setValue( value + 1 );
    }, [ label, ...dependencies ]);

    return label + ': ' + value;
};

// ...

const value = useMyHook('counter', [ dependentValue, otherDependentValue ]);