React Hooks

#react #beginners

React hooks are released on React 16.8 version. Which are built-in functions that permit developers for using the state and lifecycle methods within React components. React hooks are works on only react functional components. You can manage any type of state in react hooks. Before React hooks developers use the class components to manage states. In the class component, developers need to write more codes to manage code but in react hooks you can manage states in one line code.

Rules of using React hooks: React hooks are called only in React functional Component. React hooks should be called on top of the component and React hooks can’t be conditional.

Type of Hooks: React has three basic Hooks. Three basic hooks are useState(), useEffect(), usContext().

Using useState() Hook: useEffect() hooks are used for managing states.useState() hooks should be used when the DOM has something that is dynamically manipulating or controlling.
First, you need to import useState() from React on top of your code. If you don’t import useState() from React then useState() hook will not work.

After importing, you call that useState() and useState take initial value, on the left side take you have take two properties using the third bracket. The first property is used to show that state and where the store the changed state is saved and the second property is used for changing state or storing a new state value.

You can set an initial value in useState. Click here to see a code example.

Using useEffect() Hooks: useEffect() hook use for fetching data, directly update the DOM. useEffect() hooks allow performing to the side effects of your component. The useEffect hook works on the website reload and works on your dependencies. The useEffect() hooks take two arguments. The first argument takes a function and the second one takes dependencies. You can add one and more than one dependency. Default the useEffect works when the page load or refresh if you don’t use any dependencies. You need to import useEffect from React if you don’t import that it won’t work.

Click here to see code example

Using useContext() hook: useContext() is used for using context API. it helps to pass data or state through the component tree without having to pass props down manually through each nested component. Before useContext passing data in nested components use prop drilling or redux. Then react create a built in context which helps to pass data to nested components without passing data in the unwanted components.
Click here to see a demo
.

[ THANK'S FOR READING MY BLOG.]