What are React Hooks? React Hook useEffect has a missing dependency

What are React Hooks? : Hooks has been added in ReactJs’s Version 16.8, Main purpose of hooks was to use React features without writing class. Hooks lets you “hook into” react features like we use state hook to set state in react components Hooks are backend-compatible.
When we write function component here you can add some state according to your need, previously you had to convert it to a class. React Hooks gives the abilityto use them inside existing function component. Lets learn more on reactjs hooks.

We will discuss two main Hooks that are basic and used mostly or you can say that they are the heart of react.

React Hooks List | Hooks in React

1. State Hook (useState)
2. Effect Hook (useEffect)
3. Custom Hooks (Depends On your need)

Rules of Hooks || React Hooks Lifecycle

Hooks are JavaScript functions, but they impose two additional rules:

• • Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions.
  • Only call Hooks from React function components. Don’t call Hooks from regular JavaScript functions. (There is just one other valid place to call Hooks — your own custom Hooks. We’ll learn about them in a moment.)

State Hook (useState) : State hook is used to set a state and that state can be accessed in child component as well as in parent component. We can set a state as Boolean, Array, Null values types. Lets have an example from react official website.

import React, { useState } from 'react';

function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);

return (
<div>

You clicked {count} times

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

</div>
);
}

In above example we have declared count variable  in function component as

 const [count, setCount ] useState(0);

Right now count is set to zero value we can check it with printing the count state value in console like this

 console("current count", count)

And on button click event we are adding +1 to count state.. each time you click one button it will increase the value by 1.

Effect Hook (useEffect) : React Effect Hook provide us the ability to preform side effects in function component. Same example we are using in the effect hook that we used in the State Hook. useEffect hook tells the react that your component need to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates.

By default useEffect Hook run’s after every render, it runs both after the first render and after every update. .

Basically in this example whenever we hit the button it will update the title and will show how many time we have clicked the button by using useEffect Hook function.

import React, { useState, useEffect } from 'react';

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

// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
});

return (
<div>

You clicked {count} times

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

</div>
);
}

React Hooks Interview Questions

Coming Soon

React Hooks Lifecycle

Coming Soon