reactJs(Custom Hooks)

reactJs(Custom Hooks) notes.
Although there are multiple react hooks already available which I have already covered in my previous articles, but sometimes as per our useCase/requirement we can also create a brand new react hook, which could be a combination of existing react hooks, thus hooks help us to avoid repeated nature of code by extracting component logic into re-usable functions.

A custom Hook is a JavaScript function whose name starts with ”use” and that may call other Hooks.

Lets understand the custom hook with below sample code. Consider this Form component:

// Below is App.js file which consist of all the form logic.

import { useState } from 'react'; // here we are importing useState hook in order to use it in this functional component.

export default function Form() {

const [firstName, setFirstName] = useState('Mary'); //useSate hooks returns statevalue and a setter function to modify the state value(here we are using es6 destructuring to get the return value from the useState hook).

const [lastName, setLastName] = useState('Poppins'); //useSate hooks returns statevalue and a setter function to modify the state value(here we are using es6 destructuring to get the return value from the useState hook).

function handleFirstNameChange(e) { setFirstName(e.target.value); } //this function will use setFirstName setter function to update state value.

function handleLastNameChange(e) { setLastName(e.target.value); } //this function will use setLastName setter function to update state value.

return (

<label>

First name:

</label>

<label>

Last name:

</label>

<p><b>Good morning, {firstName} {lastName}.</b></p>

</>

);

}

There’s some repetitive logic for each form field:

There’s a piece of state (firstName and lastName).
There’s a change handler (handleFirstNameChange and handleLastNameChange).
There’s a piece of JSX that specifies the value and onChange attributes for that input.

You can extract the repetitive logic into this useFormInput custom Hook:

// Below is useFormInput.js file

import { useState } from 'react';

export function useFormInput(initialValue) {

const [value, setValue] = useState(initialValue);

function handleChange(e) { setValue(e.target.value); }

const inputProps = { value: value, onChange: handleChange };

return inputProps;

}

// Below is the updated App.js file after the repetitive logic is extracted into useFormInput.js file,
import { useFormInput } from './useFormInput.js';

export default function Form() {

const firstNameProps = useFormInput('Mary');

const lastNameProps = useFormInput('Poppins');

return (

<label>

First name:

</label>

<label>

Last name:

</label>

<p><b>Good morning, {firstNameProps.value} {lastNameProps.value}.</b></p>

</>

);

}

Custom Hooks let you share stateful logic but not state itself. Each call to a Hook is completely independent from every other call to the same Hook. This is why the two sandboxes above are completely equivalent. If you’d like, scroll back up and compare them. The behavior before and after extracting a custom Hook is identical.

Happy coding Thanks.

// Article ends here...