This post was originally posted on my blog @ easy-code.blog
Hooks are a new addition in React 16.8 and above. They let you use state and other React features without writing a class.
Building your own Hooks lets you extract component logic into reusable functions.
Let's take a look into this simple hook example:
import React, {useState} from 'react';
const CounterApp = () => {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
const decrement = () => setCount(count - 1);
return (
<div>
<h1>Your number is {count}</h1>
<button onClick={() => increment()}>
Increment
</button>
<button onClick={() => decrement()}>
Decrement
</button>
</div>
);
};
export default CounterApp;
In the above example you will notice that when logic will have more cases it will be difficult and unable to reuse.
Extracting a Custom Hook:
When we want to share logic between two JavaScript functions, we extract it to a third function. Both components and Hooks are functions, so this works for them too!
A custom Hook is a JavaScript function whose name starts with ”use” and that may call other Hooks. For example, useCounter below is our first custom Hook:
import React, {useState} from 'react';
const useCounter(value? : number) {
// use parameter value or init with 0 value.
const [count, setCount] = useState(value || 0);
const incrementCounter = () => setCount(count + 1);
const decrementCounter = () => setCount(count - 1);
return {
count,
setCount,
incrementCounter,
decrementCounter
}
}
export default useCounter;
Using the Counter Hook:
import React, {useState} from 'react';
import {useCounter} from './my-counter-hook'
const CounterApp = () => {
// Declare my Counter hook
const [count, setCount, incrementCounter, decrementCounter] = useCounter(0);
// extend for reuse
const reset = () => setCount(0);
return (
<div>
<h1>Your number is {count}</h1>
<button onClick={incrementCounter()}>
Increment
</button>
<button onClick={() => decrementCounter()}>
Decrement
</button>
</div>
);
};
export default CounterApp;
useYourImagination()
Custom Hooks offer the flexibility of sharing logic that wasn’t possible in React components before. You can write custom Hooks that cover a wide range of use cases like form handling, animation, declarative subscriptions, timers, and probably many more we haven’t considered.
Happy Debugging 👨🏼💻👩💻
Top comments (0)