Why does React Hooks enable writing simpler code? 🎣

While learning React Hooks I have read a lot about the conceptual decisions of the React team. E.g., they state that React components with React Hooks are easier to write and understand as Class components.

Why do you think writing projects with React Hooks will lead to more understandable and maintainable code?

Comments

[Sung M. Kim]

Hooks enables "function component" (FC) to "hook" into React's life cycle methods getting rid of the need to use "class components" (CC).

The reason this makes it more "understanble" & "maintainable" code is

1. Within FC, you don't neeed this mostly to refer to internal methods, variables thus make the code shorter and less error prone.
   • this in JavaScript is pretty tough to swallow. Less of it to deal with easier to understand.
2. Hooks makes code shorter (refer to this image comparison as an example).
   • Less boiler plate code required means, less code to maintain, thus easier to maintain and faster to develop.
3. And also, clean up codes can be co-located without spreading through React life cycle methods such as componentDidMount, componentWillUnmount, which is usually an error-prone process.

Would anyone else share more reasons? (or spot any mistakes I have?)

[Sebastian Weber]

Thanks a lot for this helpful explanation.

[Sung M. Kim]

You're welcome.
Enjoy React with 🎣

[Sebastian Weber]

Using React Context is less verbose and, thus, much easier to understand and develop.