Basic Concept of ReactJS Hooks

Introduction

ReactJS has revolutionized the front-end web development landscape. By using reusable components of React, you can build user interfaces. Reactjs Hooks was introduced a couple of years ago, which further evolved the framework.

Reactjs hooks allow developers to add state and lifecycle features to functional components, fundamentally changing how we write React applications.

Collaborating with custom React.JS solutions facilitates the seamless integration of Reactjs hooks into your project, enhancing component-level state management and improving overall code efficiency.

In this blog, we’ll explore React Hook form benefits and read our blog’s basic types of React JS Hooks. to understand state management and component behavior in React applications.

React Hooks

Hooks in React 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.

Reactjs 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 decides to add a state to it, 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 useful in reading the layout from the DOM and synchronously re-rendering itself. In the useLayoutEffect hook, updates are scheduled synchronously before the browser paints the DOM.

syntax:-

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

5. useReducer

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

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 useful 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 returns the new version of the return callback that only changes if one of the dependencies changes.This function is most usedful in conditional dynamic rendering.

7. useRef

The useRef gives 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);