Basic Concept of ReactJS Hooks

React Hooks

Hooks are a new addition to React 16.8. React (Reactjs Hooks) allows you to use their state and other React features without writing a single class.

React hooks are special functions that let us “hook into” React’s features. React’s hooks are only available in functional components. Previously, we could not use hooks with class components. If someone writes a function component, and then decides to add a state to it, then they have to convert it to a class component. But now you can use a hook inside a function component without converting them to a class.

1. useState

useState lets us use local state within a function component. we pass the initial state to this function and it returns a variable with the current state value and another function to update this value.

Declare state variable is much more simple like calling useState with some initial values useState(initial values).

Const DeclareStateVar = () =>{
		Const [ count ] =useState(100)
		Return <div> State variable is { count } </div>
		}

• Updating the state variables
• updating a state variable is much more simple than invoking the updater function returned by the useState invocation method:
  • const [defaultStateValue,updaterFunction]=useState(initalStateValue)
  • 
  • The response code for the screencast :

  • import { useState } from "react";
    
    		export default function App() {
    		const [age, setAge] = useState(19);
    		return (
    		<div className="App">
    		Today I am {age} years old
    		<div>
    		<button onClick={() => setAge(age + 1)}>Get Older</button>
    		</div>
    		</div>
    		);
    		}

2. useEffect

The useEffect Hook lets us perform the side effects in function components:

Here are some examples of data fetching: 1) fetching data, 2)directly updating the DOM, and 3) timers.

By using this UseEffect Hook, we tell React that our component needs to do something after the render.useEffect runs on every render. So that means when the count changes the automatic render process happens, which then triggers another effect.

This is not what we want. There are multiple ways to control the rendering of useEffect hook.

We should always include the second parameter which accepts an array. also, We can optionally pass dependencies into the useEffect hook in this array.

import { useState, useEffect } from "react";
		import ReactDom from "react-dom";

		export default function App() {
		const [count, setCount] = useState(19);
		const Timer = () => {
		useEffect(() => {
		setTimeout(() => {
		setCount(count + 1);
		}, 1000);
		}, []);
		};
		Timer();
		return <div className="App">I have rendered {count} times.</div>;
		}

3. useContext

A typical React application passes data top-to-bottom (e.g. child component to parent component) using props. Certain properties (such as locale preference or UI theme) can be difficult to drill down in a complex application.

In other words, if a developer logs into the application, the application will have a Nesting of Components that provides the UI.

Let’s take a look at one example. Suppose that one of the employees is logged into the React application. In a react application, there is a nesting of components that make up a react UI.

They are the App Component, the Employee Component and the last one is the Salary Component. The App Component has an Employee Object and this data is shared by Employee Component and Salary Component to function.

Context provides a mechanism to pass the data through the component tree without having to pass properties down at every level in the application.

In short, the context provides a way to share values between components without having to pass a prop through every level of the component tree.

React applications typically use context when many child components need to access the same data or values.

const ThemeContext = React.createContext("dark");

		//usage with context Consumer
		function Button() {
		return (
		<ThemeContext.Consumer>
		{(theme) => <button className={theme}>Amazing button</button>}
		</ThemeContext.Consumer>
		);
		}

		//usage with useContext hook
		import { useContext } from "react";

		function ButtonHooks() {
		const theme = useContext(ThemeContext);
		return <button className={theme}>Amazing Button</button>;
		}

4. useLayoutEffect

useLayoutEffect has the very same behaviors as the useEffect hook. but it calls synchronously after all the DOM mutations are performed successfully. useLayoutEffect is used to read the layout from the DOM and synchronously re-render itself. The update required schedule inside the useLayoutEffect hook will be called synchronously before the browser has painted DOM.

syntax:-

useLayoutEffect(() => {
		//do something
		}, [arrayDependency])

5. useReducer

The behavior of the useReducer hook is much more similar to useState. Sometimes it is also used as an alternative way to useState. Mostly it is used for complex state logic where there is a dependency on previous state data or many sub-values to be invoked.

It Depends on our need where to use this hook.

Basic usage of useReducer as opposed to calling useState, we can call useReducer with a reducer and the initialValue.

6. useCallback

The useCallback hook is used in the case we have a component in reacting in which the child component is rerendering multiple times without need.

const { useCallback } = require("react");

		const memoizedCallBack = useCallback(() => {
		doSomething(a, b);
		}, [a, b]);

const

we can Pass an inline callback and an array of dependencies to the useCallback. This useCallback will return the version which is memoized of the return callback that only changes if there is a change in one of the dependencies has changed. This function is most used Full in conditional dynamic rendering.

7. useRef

The useRef is mainly used to give reference to the current DOM element.useRef returns a “ref” object. We can access values of useRef using. Current property of the return object. The current property is initialized by passing initial values The — useRef(initialValue).

Example Reactjs Hooks:-

import React, { useState, useRef } from "react";
		import ReactDOM from "react-dom";

		import "./styles.css";

		function App() {
		let [name, setName] = useState("Nate");

		let nameRef = useRef();

		const submitButton = () => {
		setName(nameRef.current.value);
		};

		return (
		<div className="App">
		<p>{name}</p>

		<div>
		<input ref={nameRef} type="text" />
		<button type="button" onClick={submitButton}>
		Submit
		</button>
		</div>
		</div>
		);
		}

		const rootElement = document.getElementById("root");
		ReactDOM.render(<App />, rootElement);