React Hooks

React Hooks: When would I use a Hook?

What is a Hook? Hooks are functions that let you “hook into” React state and lifecycle features from function components.

Hooks don’t work inside classes — they let you use React without classes.

When would I use a Hook? If you write a function component and realize you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component. We’re going to do that right now!

- useState lets us keep the local state in a functional component.

- Inside the Example component, we declare a new state variable by calling the useStateHook. It returns a pair of values, to which we give names. We’re calling our variable count because it holds the number of button clicks. We initialize it to zero by passing 0 as the only useState argument. The second returned item is itself a function. It lets us update the count so we’ll name it setCount.

- When the user clicks, we call setCount with a new value. React will then re-render the Example component, passing the new count value to it.

import { useState } from ‘react’;function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}> Click me </button
</div>
);
}

What do we pass to as an argument? The only argument to the Hook is the initial state. Unlike with classes, the state doesn’t have to be an object. We can keep a number or a string if that’s all we need. In our example, we just want a number for how many times the user clicked, so pass as initial state for our variable. (If we wanted to store two different values in state, we would call twice.)

What does return? It returns a pair of values: the current state and a function that updates it. This is why we write . This is similar to and in a class, except you get them in a pair

Reading State

When we want to display the current count in a class, we read :

<p>You clicked {this.state.count} times</p>

In a function, we can use directly:

<p>You clicked {count} times</p>

Updating State

In a class, we need to call to update the state:

<button
onClick={() => this.setState({ count: this.state.count + 1 })}
> Click me
</button>

In a function, we already have and as variables so we don’t need :

<button onClick={() => setCount(count + 1)}>   
Click me
</button>

Tip: What Do Square Brackets Mean?

You might have noticed the square brackets when we declare a state variable:

const [count, setCount] = useState(0);

The names on the left aren’t a part of the React API. You can name your own state variables:

const [fruit, setFruit] = useState('banana');

This JavaScript syntax is called “array destructuring”. It means that we’re making two new variables and , where is set to the first value returned by , and is the second. It is equivalent to this code:

var fruitStateVariable = useState('banana'); // Returns a pair
var fruit = fruitStateVariable[0]; // First item in a pair
var setFruit = fruitStateVariable[1]; // Second item in a pair

When we declare a state variable with , it returns a pair — an array with two items. The first item is the current value, and the second is a function that lets us update it. Using and to access them is a bit confusing because they have a specific meaning. This is why we use array destructuring instead.

Using Multiple State Variables

Declaring state variables as a pair of is also handy because it lets us give different names to different state variables if we want to use more than one:

function ExampleWithManyStates() {
// Declare multiple state variables!
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
...
your code
...
}

In the above component, we have , , and as local variables, and we can update them individually:

function handleOrangeClick() {
// Similar to this.setState({ fruit: 'orange' })
setFruit('orange');
}

You don’t have to use many state variables. State variables can hold objects and arrays just fine, so you can still group related data together. However, unlike in a class, updating a state variable always replaces it instead of merging it.

Hooks are functions that let you “hook into” React features from function components. Their names always start with , and there are more Hooks we haven’t seen yet.

Thanks for reading..!!

for more follow - https://medium.com/@ankitkamboj18

Software Developer