Comman ReactJS Hooks

In ReactJS we have two type of components.

First one is Class based Component and Second one is Functional Based component.

Class Based component are based on ECMAScript 2015, also known as ES6 and the other hand we have function based component which are based on JavaScript functions,

Initially Class based Components are more powerful than Function Components So React team introduced Hooks as a new addition to React v16. 8.0. Functional components now have the same capabilities as class components, including the ability to access the state system and accomplish the same consequences as class component lifecycle methods.

There are so many hooks in ReactJS But two are mostly used component

1) useState. 2) useEffect

useState is a Hook that enables state variables to be used in functional components.. We can pass the initial state to this function and it returns a value with change current state value (not necessarily the initial state) and another function to update the value. We can save any type of value in initial state it can be boolean, String or Array, we use UseState hook also for getting the values of forms in React JS. It is the most common hook in ReactJS.

Syntax of useState:-

Const [state, setState] = useState(currentState)

useEffect is a Hook which is used for using the component LifeCycle method is Function based Components. The hook that manages side-effects in functional components is useEffect(callback, dependencies). The side-effect logic is placed in the callback argument, which is a function. dependencies is a list of your side-dependencies, effect's which can be props or state data.

useEffect(callback, dependencies) calls the callback after initial mounting and on subsequent renderings if any of the dependencies values have changed.

Syntax of useEffect:-

useEffect(() => {

},[])