reactjs hooks

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.

The Hook in react is a type of special function that lets us “hook into” React features reactjs hooks is a special function developed especially for the functional components we can not use hooks inside class components previously If someone writes a function component and then he decides to add some state to it, then they need to convert it to class components. but now you can use a hook inside a function component without converting them to class.

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 much more simple as invoking the updater function returned by the useState invocation method:
    • const [defaultStateValue,updaterFunction]=useState(initalStateValue)
    • Reactjs Hooks
    • 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>
      );
      }

useEffect

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

Here are some of the 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 automatically 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>;
}

Hire ReactJS Developer

useContext

In a typical React application, the data is passed from top to down (e.g. parent component to child component) through the props, but this can be difficult for certain types of props (e.g. locale preference, UI theme) that are required by many components which are Nested at different levels within an application which leads to the props drilling concept.

suppose When a developer is Logged into the typical React application, the react application has a Nesting of Components that are responsible for making UI.

Let’s take a look at one example. suppose that one of the employees is Logged into the React application, The react application contains Nesting of Components which are making 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 props down manually 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.

mainly context is used when some data or values need to access by many child components at different nesting levels in the react application.

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>;
}

useLayoutEffect

useLayoutEffect has the very same behaviors as the useEffect hook has. 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])

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.

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.

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 return object.the .current proprty 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);

React.js Hooks

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply