Using a React hook inside a class component [duplicate]

Question

I'am working on med sized project and some components in react are created using a class, along with the component level state. For authentication and keeping the token within the local-storage and reloading the user from it, I would use a hook.

I regret this decision now as if you were to refresh on a class component you will lose the user and get kicked back to the login screen.

I know hooks are used for functions but is there a way to use a hook (too keep the user) inside a class?

//The hook I am using

useEffect(()=>{
auth.Context.loadUser();
//eslint-disable-next-line
},[]);

NirG · Accepted Answer · 2019-08-04 20:23:58Z

6

According to React docs you can't use hooks inside a class component:
https://reactjs.org/docs/hooks-faq.html#should-i-use-hooks-classes-or-a-mix-of-both

What you can do is to wrap your class component with a functional component and pass props to it

for example:

class MyClass extends React.Component{
  render(){
    <div>{this.props.user}</div>
  }
}

const funcComp = () => {
  const [user, setUser] = useState();

  useEffect(() => {
    auth.Context.loadUser().then(user => setUser(user))
  }, [setUser]);

  return <MyClass user={user}/>
}

answered Aug 4, 2019 at 20:23

NirG

7765 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using a React hook inside a class component [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related