DEV Community

Cover image for Explain React Hooks Like I'm Five
Zachary Stone
Zachary Stone

Posted on

Explain React Hooks Like I'm Five

I have worked with ReactJs on a previous project at a previous employer, but I never got to use React Hooks. Since that is the way React is going explain to me what it is!

Other questions you can answer are:

  • why is it important?
  • what is it replacing?

For extra high fives from a five year old, give me a code example I can understand!

Who will be my Clarissa and explain it all to me?

Clarissa Explains It All

Discussion (6)

Collapse
chrispardy profile image
chris-pardy

Hooks are a way of sharing reusable behavior in React. They pair with components which are a way of sharing reusable visuals. A good example of why you would need hooks is the React Spring library. react-spring.io/docs/hooks/use-spring which provides functionality to do animations.

Before hooks came out the solution to sharing functionality like this was either.
1) Higher Order components
2) render props
Neither solution is ideal because they create extra components, make Server Side rendering harder, and make it hard to combine behaviors.
For instance if you wanted to control an animation via a websocket you could use react-spring and react-use-websockets together.

Collapse
zacharythomasstone profile image
Zachary Stone Author • Edited on

Hooks are a way of sharing reusable behavior in React. They pair with components which are a way of sharing reusable visuals.

Wow! What a great way to describe this, you get two high fives and a sticker!

Collapse
macsikora profile image
Pragmatic Maciej • Edited on

Component lifecycle is a tool which allows code injection at specific events in time, the question is - when?

Hooks is a tool which enables code injection for specific purpose, hooks ask what you want, not when you want. You want state - use it, you want effect - use it, how it will be executed and when is solved by React.

Collapse
zacharythomasstone profile image
Zachary Stone Author

I like the contrast between when and what.

Although the terminology used would be difficult for a five year old to comprehend. Could you fit this contrast into a simple real world example?

Not hating on your response, I like it a lot. I just also like the challenge of explaining technologies to the non technically minded person.

Collapse
isaachagoel profile image
Isaac Hagoel

Hooks are a new mechanism that tries to address a bunch of problems that React itself created in the first place. While it does propose an interesting way to approach said problems, it also introduces a whole set of new problems that are probably as bad as the ones it was trying to solve:D

P.S don't hate on me. I love React and all.

Collapse
zacharythomasstone profile image
Zachary Stone Author

No hate here, it's healthy to have PROS and CONS for every language you use, even if you love the language. When we love a technology so much that we ignore it's flaws, we will never improve.