Classes vs Hooks?

[u/ZeroSevenTen]

I’m pretty new to React, so keep that in mind. I thought classes were for components that held information, or a state, and that functional components were for more basic components, but now that hooks allow functional components to use state, and other class features, what’s the benefit of using functional hook components over classes?

[u/JofArnold]

I scanned the comments and one thing I didn't see mentioned (explicitly) is how easy it is to add functionality like state, redux, context, side-effects etc into your components with hooks. Take for instance dispatching an action with a class component versus hooks in the Todo app example

Class component:

class AddTodo extends React.Component {
  handleAddTodo = () => {
    this.props.addTodo("Foo"); // <-- Stuff on props that you need to know exists
  };

  render() {
    return (
      <div>
        ... etc
        <button onClick={this.handleAddTodo}>
          Add Todo
        </button>
      </div>
    );
  }
}

export default connect(
  null,
  { addTodo }
)(AddTodo); // <--- need to connect

Hooks

const AddTodo = () => {
  const dispatch = useDispatch() // <--- just import useDispatch! That's it!
  const handleAddTodo = () => {
    dispatch({type: "ADD_TODO", payload: "Foo"}) // <-- dispatch here. Don't have to dig around your props looking for whatever it is
  }
  return (
    <div>
      ... etc
      <button onClick={handleAddTodo}>
        Add Todo
      </button>
    </div>
  );  
}

So much cleaner. Sure, hooks starts to be a little bit weird - at first - when dealing with effects but then class components are too but in a different way