Commonly Used React Hooks

Hooks are newly added in React. It helps to declare state and other features in functional components without writing class. Hooks makes complex calculation, Rendering, lifecycle easily.

useState()

You can easily handle changeable data using useState that may be variable, object, array, boolean, and any types of data. It’s easy to use just import hooks & declare a state in the functional component.

Structure: const[value, setValue] = useState(initialValue)

useEffects()

By using this Hook, you tell React that your component needs to do something after render.

Structure: useEffect(callback,[ dependencies])

Dependencies: You can pass an empty array to call the effect on the first time render. You can use a state inside the dependencies array, effects will run when the dependencies state will be changed.

useParams()

This hook helps to grab the parameter value in ReactJs and return an object of key /value pairs from URL parameters.

const {key} = useParams()

Context API (createContex() & useContex())

Context API used to share data with any component. Generally, you pass data from parent to child via props. But in complex applications where data is needed to share in a number of components where parent to child & child to parent, it’s not possible to share data by props there Contex API helps you to manage information easily.

Syntax Create Contex API: export const contexApi = createContext()
Syntax Use Contex API: useContext(contexApi)

useHistroy()

useHistroy hook is used to Navigate with a route link functionally.

useReudcer()

useReducer is usually useful to useState when you have a complex state when the next state depends on the previous one.

Structure: const [state, dispatch] = useReducer(reduce, initialvalue)
Defination:  
  state: Declared State Can use from it.
  dispatch: An Action To dispatch.
  reduce: This is the action parform process.
  initialValue: Firstly initialized value.