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
 
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
 
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
 
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.

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
 
scriptkavi profile image
ScriptKavi •

Why create one when you can get all awesome hooks in a single library?

Try scriptkavi/hooks. Copy paste style and easy to integrate with its own CLI