DEV Community

Cover image for Why You Should be Writing Your Own React Hooks

Why You Should be Writing Your Own React Hooks

nathan amick on November 30, 2019

tl;dr Custom React hooks can provide a great place to draw a boundary between imperative and declarative code. In this example, we'll l...
Collapse
 
theodesp profile image
Theofanis Despoudis

The only thing thats left is how to verify it with tests that it works. As it is, it will not pass a code review sadly.

Collapse
 
namick profile image
nathan amick

Indeed, you are correct good sir. I shall endeavor to improve my TDB (test driven blogging) skills. ;-)

But seriously, you bring up a great point. If learners only read about writing tests in blog articles about testing, it gives credence to the idea that testing is just one additional and possibly optional chore rather than an integral and vital part of the development process.

Collapse
 
httpjunkie profile image
Eric Bishard

In order to cover testing, why don't we just take one example and test it thoroughly. Would make for Ann engaging second article!

Collapse
 
namick profile image
nathan amick
Thread Thread
 
theodesp profile image
Theofanis Despoudis

Epic!

Collapse
 
fly profile image
joon

The thrills and power you feel when you get the hang of custom hooks... it was quite surreal when you realize you don't need to put 7 useEffects and 16 useStates in a single component :)
And refactoring said components is just.... delicious.

Collapse
 
namick profile image
nathan amick

You're totally right, it's an amazing feeling!

Collapse
 
full_stack_adi profile image
Aditya

Brilliantly explained, thank you!

Collapse
 
namick profile image
nathan amick

Thanks, it feels good to know that you like it. :-)

Collapse
 
gmpravin profile image
Pravin g

Very good explanation, I need this kind of post related to react hooks ,life cycle method, redux....etc

Collapse
 
fly profile image
joon

overreacted.io/a-complete-guide-to...
I very much recommend this post.

Collapse
 
namick profile image
nathan amick

Thanks. Do you find yourself needing classes and life cycle methods anymore with hooks now available?

Collapse
 
tamouse profile image
Tamara Temple

just had to jump down here to say "excellent hero image" 😉

Collapse
 
namick profile image
nathan amick

Ha, yes. I just realized that it's especially fitting for this particular example because Captain Hook is relentlessly pursued by a crocodile who has swallowed a ticking clock. :-)

Collapse
 
seanmclem profile image
Seanmclem • Edited

I see you returning setRunningTime. Do useState setFunctions return a value?

Collapse
 
namick profile image
nathan amick

I'm not sure if I understand your question, but React.useState returns two values in the form of an array. The first is the state value, which should be treated as immutable and the second is a setter function, which is used to update the state value.

More info here: reactjs.org/docs/hooks-state.html

Collapse
 
seanmclem profile image
Seanmclem

Does the setter function return a value? You know, in addition to setting one

Thread Thread
 
namick profile image
nathan amick

Oh, right. No, it doesn't return a useful value (undefined). However, it does automagically update the value of the state variable and cause your component to rerender with that new value.