React Hook
Published: 2021-12-24 00:17:04

React free fire:

React Hook
What is a Hooks?
Hooks are the new feature in the React. It allows us to use-state and other React features without writing a class. Hooks are the functions which "hook into" React state and lifecycle features from function components. Hook is only for functional component; it doesn’t work with class component.
 
There are 7 react hook available right now. They are: useState, useEffect, useMemo, useRef, useCallback, useContext, useReducer.

useState: Use State hooks allow us to create and store state in react functional component. We can update the value of useState. We can give default value in initial state. Ex: const [hello, setHello] = useState(5) 
In initial state we can pass array, object, string and boolean value. The initial state argument is only used during first render. 
** We can use multiple state hook in a single component.

useEffect: It used for performing any side effects. It called side effect because they can affect other component.  The effect hook use useEffect to perform side effects. It is like componentDidMount, componentDidUpdate and componentWillUnmount in react classes.  Actually, we use side effects when we need to reach into the outside world. Ex: fetching data from an api, working with the DOM. useEffect accepts a callback function, which will run by default when components re-renders. UseEffect let us perform conditionally with the dependencies array. We can pass dependencies array as second argument to useEffect.It called dependencies cause the effect function will run if value of dependencies change.

useRef: use ref are special attribute that are available on all react components. It allow us to create a reference to a given element when the component mounts. It can hold mutable value.
IT is used for two purpose, first: access dom element and store mutable values.

Ex: 
const MyComponent = () => {
  const ref = useRef(null);
  
  useEffect(() => {
    console.log(ref.current); // <div>Hi, I am MyConponent</div>
    console.log(typeof ref.current); // "object"
  }, [])
return <div ref={ref}>Hi, I am MyComponent</div>;
};


UseMemo: UseMemo allow us to memorize or remember the result of operations. It returns a memoized value. It accept two arguments (a function and a dependencies array). If any variable in dependency list changes, react will re-render the process.
Ex: 
	Const memoized = useMemo(compute, dependencies)


useContext: useContex is one of the basic hooks in react. useContext help us to avoid prop drilling. We know we can’t pass props  value from child to parent.But if we use useContext we can pass value anywhere.  useContext make passing value more simple.
We don’t need to pass props many levels if we use useContext. In context every context comes with a provider component. This provider component accept a value prop to be passed to consuming components. Context can make a nice simpler alternative of redux. 
Ex: 
import React, { createContext } from ‘react’;
import ReactDOM from ‘react-dom’;
const MessageContext = createContext();
myApp=()=>{
   return (
      <MessageContext.Provider value=”hello”>
         <div>
            <Test/>
         </div>
      </MessageContext.Provider>
   );
}

Test =()=>{
   return (
      <MessageContext.Consumer >
         {value=><div> message : {value} </div> }
      </MessageContext.Consumer>
   );
}