/Source

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!

Line 1: useStatelets us keep the local state in a functional component.

Line 4: Inside the Examplecomponent, 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 countso we’ll name it setCount.

Line 9: When the user clicks, we call setCount with a new value. React will then re-render the Examplecomponent, 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>
);
}

You can also find this at below. Medium - https://medium.com/@ankitkamboj18/reactjs-hooks-v16-6-3-96ae1b41290

Getting Started

Clone Github repos.

Github Link - https://github.com/ankitkamboj18

Remove .git folder and setup a new one

rm -rf .git && git init

Now push to whatever repo you want!

Ankitkamboj

Ankitkamboj

The professional learning platform

Read More