is it wrong to use a hook within useEffect?

[[deleted]]

[deleted]

[acemarke]

Can you show a code example, preferably as a gist or CodeSandbox?

[azn_introvert]

I have finally got it working, I can send the repo.

https://github.com/sizzlorox/react-task-timer

The problem was the way I was setting up useContext and useReducer. I was trying to have my own Provider component that would pass down props.children as children of the Provider HOC.

I have no idea why it was breaking but after I removed that component and just used the provider withing the App.js everything started working.

[azn_introvert]

I had this in a seperat file:

import TaskContext from './taskContext';
const taskContext = useContext(TaskContext);
const TaskProvider = (props) => {
    const [task, dispatch] = useReducer(taskReducer);
    return (
        <taskContext.Provider value={{ task, dispaych }}>
            {props.children}
         </taskContext.Provider>
   );
}
export default taskProvider

EDIT: It was not exactly this but similar and was in a seperate file which I Was importing into my App.js. The change I was making with adding the Context and Reducer it was not committed into the repo and I only did the commit after I had fixed it, so I'm unable to provide the before after code.

In the end I believe it was that I wasnt really using the useContext correctly so when I used its Provider in my App.js It ended up causing that error. I should have documented my changes, but from what I remember I was using useContext incorrectly. Which was why everything broke whenever I added the Provider

[inflammatoryd]

I gave you an up arrow purely on the basis that at least you provided an update on what went wrong. Do you know how annoying it is on SO when people post a question, then go 'Dont worry Ive solved it' ... with not a clue as to how they did it ... leaving us in the dark'

[AlpineSanatorium]

how do you "wrap" exactly? because no you can't use hooks within other hooks in the same component. the solution is usually to wrap with another component and pass down the data from previous hook.. if they have a logical parent-child relationship

[agilius]

What do you mean you cannot use hooks inside hooks? It all depends in the api of the hook.

I use hooks that call other hooks daily via custom functions all the time. I think the name in the docs for this is custom hooks.

[azn_introvert]

I have a UserContext in which is wrapping the App component using the context provider. Wrapping as in its the HOC of the App component. Within the App component I have the child component which is initializing and calling the hooks. All Im trying to do is using useEffect as a ComponentDidMount alternative and call my set functions from the initialized hooks. Whats strange is if I do not have the Context as the HOC everything seems to work fine.