React Hooks - A simple way to implement react features (2023)

React Hooks is a feature introduced inResponder 16.8that allows developers to use state and other React features without writing a class. They provide a way to reuse state logic across components. Before Hooks, stateful logic could only be used in class components.

Hooks are functions that allow you to "hook" React state and lifecycle functions from functional components. They allow you to manage component state, run side effects, and use React lifecycle methods such as assembly, update, and disassembly.

There are several built-in hooks provided by React, such as:

• state of use:This hook lets you add state to a functional component. Returns a pair of values: the current state and a function that updates that state.
• usage effect:This hook allows you to run side effects on a working component. Overrides lifecycle methods such as componentDidMount, componentDidUpdate, and componentWillUnmount.
• context of use:This hook allows accessing context values ​​in a functional component.
• Use reducer:This hook is an alternative to useState and allows you to handle more complex state logic with a reducer function.
• em Callback e em Memo:These hooks optimize the performance of functional components by remembering values ​​and functions to avoid unnecessary reprocessing.
• Use reference:This hook lets you create a mutable reference that persists while components are rendered.
• Use selector:Ouse selectorhookreact-reduxthe library simplifies the process of accessing and using Redux storage data in React components.
• use Shipping:Ouse shippinghookreact-reduxlibrary, allows access to push functionality in React components, and triggers actions to update the Redux store.
• useNavigate:OuseNavigatehook in react router allows you to programmatically navigate between routes in React Router v6.
• usage history:Ousage historyhook on react router allows access tohistoryobject and have full control over navigation and history management in React Router.

Hooks are not intended to completely replace class components, but provide an alternative way to write stateful components using functional components. They promote reuse, better encapsulation, and easier testing.

Use status hook

W reactions,state of usehook is used to add state to functional components. It allows you to declare and manage state variables in components.

1. Matterstate of useReact library hook:

   import React, { useState } de "react";

2. In your functional component callstate of usehook and provide the initial value of the state variable. Returns an array with two elements: the current state value and a function that updates that state value.

   const My Ingredient = () => { const [number, number of settings] = usage state (0); // ...};

3. Now you can use a state variable (tell) and the corresponding update function (number of settings) in your component:

   const CounterComponent = () => { const [count, setCount] = useState (0); const incrementCount = () => { setCount(liczba + 1); }; retornar (
    
   The counter value is: {count}
    Increase 
   );};

Please keep this in mind when usingstate of use, the state need not be an object; it can be a raw value (like a number or a string) or even an arraystate of usehook, functional components can now have local state, making it easier to manage and update state in React apps.

use effect hook

W reactions,UseEffecthook is used to perform side effects on functional elements. Allows code to run in response to component lifecycle events such as mounting, updating, or dismounting components. See how you can useUseEffectright:

1. MatterUseEffectReact library hook:

   import React, { useEffect } de "react";

2. In your functional component callUseEffecthook and pass the callback function as the first argument. This callback function will run after the component renders for the first time, and may also run on subsequent updates.

   const MyComponent = () => { useEffect(() => { // Side effect code here // ... // Cleanup function (optional) return () => { // Cleanup code here // . .. } ;}, []); // ...};

   In the example above, we setUseEffectcut wmy componentfunctional element. The callback function passed toUseEffectwill run after pre-rendering. Optionally, you can also supply an array of dependencies as a second argument specifying when the effect should run. An empty dependency array ([]) indicates that the effect should only be triggered once, after mounting the component.

3. Within the callback function, you can perform various side effects such as fetching data from the API, subscribing to event listeners, manipulating the DOM or updating external libraries. code insideUseEffectthe callback will fire after the component is rendered.

   const ListComponent = () => { useEffect(() => { // Fetch items from the API endpoint const fetchData = async () => { const response = await fetch('https://api.mydata.com/items ' ); const data = await response.json(); // Processing data here }; fetchData(); }, []); // ...};

   In the example above,download datathe function is called insideUseEffectcallback to fetch data asynchronously. perUseEffecthook, you can manage side effects within functional components, keeping your code organized and avoiding the need for class components. Provides a way to incorporate asynchronous operations, subscriptions, and other side effects into a React application.

useRef Hook

Ouse Refthe hook is used to create a mutable reference that persists across the component's rendering. Lets you access and manipulate elements or DOM values ​​that need to persist across renders without triggering a re-render.

1. Matteruse RefReact library hook:

   (Video) 10 React Hooks Explained // Plus Build your own from Scratch

   import React, { useRef } de "react";

2. In the component's function, call the methoduse Refhook and assign the returned value to a variable. This variable can contain a reference to a DOM element or any other value.

   const DataComponent = () => { const elRef = useRef(); // ...};

3. Assign a reference to the DOM element by loading a filerefprop to the element you want to refer to:

   const DataComponent = () => { const elRef = useRef(); return (
   {/* Item content */
   );};

4. You can access and manipulate the referenced item or value withcurrentreference property:

   const DataComponent = () => { const elRef = useRef(); const handleClick = () => { // Access the indicated item console.log(elRef.current); // Handle referenced element elRef.current.style.backgroundColor = 'red'; }; Returns (
    click me 
   See Also
   Use o Efeito Gancho - Reagir
   );};

byuse Refhook, you can access and manipulate elements or referenced values ​​directly without triggering a re-render, making it useful for tasks that require imperative or low-level operations on React components.

Use a context hook

Ouse contextthe hook is used to access context values ​​in a functional component. Context provides a way to pass data through the component tree without manually passing props at each level. Ouse contexthook allows you to use this data in components. See how you can useuse contextright:

1. Create a context withcreate contextfunction:

   import React, { createContext } from 'react';const DataContext = createContext();

2. Wrap components that need access to context data with aSupplierHey:

   const DataComponent = () => { let items = [ /* your list of items here */ ] return ({/* child components go here */) ;};

   In the code above, we put the components that need to access the filedata contextdata fromDataContext. SupplierHey. Ovalorprop is used to provide a value that will be available to components.

3. In your functional component calluse contexthook and pass a Context object as an argument. Returns the value of the current context.

   const ChildComponent = () => { const dataItems = useContext(DataContext); // use context data here};

   In the code above, we call a methoduse contextcut wchild itemfunctional component and passagedata contextobject as an argument. returneddata elementswill be the value of the current context.

4. you can use nowdata elementsin your component as needed:

   const ChildComponent = () => { const dataItems = useContext(DataContext); retornar (
   {dataItems.map((item)=>{
   {item}
   })}
   );};

   Ouse contexthook allows accessing context values ​​directly in functional components without the need for a context consumer component. Simplifies the use of contextual data and makes code more concise and readable.

use reducer hook

Ouse a reducerhook is used to manage more complex state logic using reducer functions. Used to set state in a Redux application. See how you can useuse a reducerright:

1. Matteruse a reducerReact library hook:

   import React, { useReducer } de "react";

2. Define a reducer function that takes the current state and action as arguments and returns the new state. The shrink function follows the same pattern as the shrink function in Redux.

   (Video) React tutorial in Hindi #28 Hooks in ReactJs

   const reducer = (state, action) => { // Perform state change based on action type switch (action.type) { case 'INCREMENT': return { count: state.count + 1 }; case "DECREASE": return { number: state.number - 1 }; default: return state; }};

   The reducer method above defines a set of actions that modify the state. The reducing function assumes the current state (country) and action (Action) as arguments and returns the new state.

3. In your functional component calluse a reducerhook and pass the reduction function and initial state as arguments. Returns the current status and a push function that triggers status updates.

   const HelloComponent = () => { const initialState = { number: 0 }; const [status, sending] = useReducer(reducer, initial state); // ...};

   when we calluser reducerhook, we pass the reducer object and the initial state object as arguments. returns a paircountryobject iarrangementfunction. Ocountrya variable stores the current state, aarrangementThe function is used to trigger the status update.

4. you can use nowcountryEUarrangementin your component to access the current state and trigger state transitions:

   const HelloComponent = () => { const initialState = { number: 0 }; const [status, sending] = useReducer(reducer, initial state); const increment = () => { shipping ({ type: 'INCREMENT' }); }; const decrease = () => { shipping ({ type: 'DECREASE' }); }; returns (
    
   Number: {state.count}
    Increase Reduction 
   ) ;};

   Ouse a reducerhook provides a structured approach to handling state updates and promotes code predictability and maintainability.

use memo hook

Ouse notesthe hook is used to save expensive calculations or calculations in a functional component. It allows you to optimize performance by caching the result of a function or value and only recalculating it when dependencies change.

1. Matteruse notesReact library hook:

   import reaction, { useMemo } from "react";

2. When calling the componentuse noteshook and provides a callback function and an array of dependencies as arguments. The callback function will be executed to calculate the stored value and the dependencies determine when the value should be recalculated.

   const DataComponent = () => { const memoValue = useMemo(() => { leave the result; // Do expensive calculations here and store the returned result in the result; }, [dependencies]); // ...};

   The callback function passed touse noteswill be executed to calculate the stored value. The value will only be recalculated if the dependencies specified in the array change.

3. Inside the callback function, do an expensive calculation or computation that you want to remember. The result of this calculation will be returned as a stored value.

   const DataComponent = () => { const memoValue = useMemo(() => { // Cálculo caro ou cálculo const result = myExpensiveCalculation(dependencyValue); return result; }, [dependencyValue]); // ...};

4. stored value,memorandum value, can now be used in your component:

   const DataComponent = () => { const memoValue = useMemo(() => { const result = myExpensiveCalculation(dependencyValue); // ... return wyniku; }, [dependencyValue]); retornar (
    
   Memorized value: {memoValue}
    
   );};

   byuse noteshook, you can optimize the performance of your components by avoiding unnecessary recalculations of costly computations. The stored value is stored and reused as long as the dependencies remain the same, reducing computational load and improving application performance.

use callback hook

Normally in React, when a parent component is re-rendered, all of its child components are also re-rendered. This will be extra overhead if the child component fails to update its model. To improve application performance, we can avoid re-rendering child components if it doesn't update the values. Ouse callbackthe hook is used to remember the callback function and avoid unnecessary re-rendering of child components that depend on that function. This is especially useful when passing callbacks to child components that rely on stable references to avoid unnecessary re-rendering.

1. Matteruse callbackReact library hook:

   import React, { useCallback } de "react";

2. In your functional component calluse callbackhook and provides a callback function and an array of dependencies as arguments. The callback function will be remembered and recreated only when dependencies change.

   (Video) #30: Hooks in React JS in Hindi | useState in Hook in React JS in Hindi in 2020

   function ContactComponent() { const contactSelectionHandler = useCallback((/* argumentos */)=>{ // lógica aqui }, [/*dependencies */]) return (
   // Child components are rendered here
   );}

   The callback function passed touse callbackwill be remembered and will only be recreated if the dependencies specified in the array change.

3. Callback saved,Get in touch with SelectionHandler, can now be used in your component or passed to child components:

   importar { useCallback, useState } de "reagir"; função ContactComponent() { const [branch, setBranch] = useState(); const contactSelectionHandler = useCallback((kraj)=>{ setBranch(kraj); }, [branch]) return (
    {filial &&
   Thank you for choosing the agency {branch }
   }
   );}

4. In the child component, we can call the callback method to update the dependency variable (ex.: filial). Returns a remembered child component.

   import { notatka } z "reagir"; function ContactInfo({contactSelector}) { return (
    
   contact us
    
    
   // some info herecontactSelector('IN')}>Visitar 
    
   // Other information herecontactSelector('US')}>Visitar 
    
    
   );}export default note (ContactInfo)

byuse callbackhook, you can avoid unnecessary rendering of child components that depend on the callback function. The callback function will be remembered and keep its reference stable as long as the dependencies remain the same. This helps optimize performance by preventing unnecessary re-rendering of components that don't require it, improving the overall performance of your React app.

use selector hook

Ouse selectorhook is a function provided by the React Redux library. Lets you pull data from a Redux store into a React component. Ouse selectorhook subscribes to the Redux store and whenever the state of the store changes, it automatically renders the component with updated data.

1. Matteruse selectorhook z biblioteki React Redux:

   import { useSelector } of "react-redux";

2. In your functional component calluse selectorhook and pass a selector function as an argument. The selector function determines which part of the Redux storage state you want to extract.

   const HomeComponent = () => { const data = useSelector(selectorFunction); // ...};

   Oselector functionis a function that takes the state of the entire Redux store as an argument and returns the specific data you want to extract.

3. Define a selector function that pulls the desired data from the Redux storage state:

   const selectorFunction = (state) => { return state.someData;};

4. extracted data,Danish, can now be used in your component:

   const HomeComponent = () => { const data = useSelector(selectorFunction); retornar (
    
   Dates: {date}
    
   );};

Ouse selectorhook simplifies the process of accessing and using Redux storage data in React components. It automatically subscribes to store status updates and ensures that the component is re-rendered whenever the relevant data changes. This helps keep the component's UI in sync with the Redux store, making it easier to build and maintain complex React apps with predictable state management.

use dispatch hook

Ouse shippinghook is a function provided by the React Redux library. Lets you send actions to a Redux store in a React component. Ouse shippingthe hook contains a reference toarrangementa function that can be used to trigger status updates by sending actions.

1. Matteruse shippinghook z biblioteki React Redux:

   import { useDispatch } z „react-redux”;

2. In your functional component calluse shippinghook for a reference toarrangementfunction:

   const HomeComponent = () => { const shipping = useDispatch(); // ...};

3. to usearrangementfunction to send action to Redux store:

   const HomeComponent = () => { const shipping = useDispatch(); const handleClick = () => { shipping ({ type: 'SOME_ACTION', payload: someData}); }; retorna (
    do something 
   );};

   The action is an object with atypea property that represents the type of action and ato loada property that contains optional data for the action.

4. OarrangementThe function can be used to trigger status updates by sending actions to the Redux store.

byuse shippinghook, you can easily accessarrangementin your React components and trigger actions to update the Redux store. This simplifies the process of managing state in your components and allows you to seamlessly interact with the Redux store.

Use the navigation hook

W React Router v6,useNavigatehook is available to programmatically navigate between different routes in your application. It provides a convenient way to browse without using traditionallubricantIngredients. See how you can useuseNavigateright:

1. Make sure you have React Router v6 installed in your project. You can install it with npm or yarn:

   npm install react-router@next

   lubricant

   yarn add react-router@next

2. MatteruseNavigatecourt ofreact-router-dompackage:

   import { useNavigate } z „react-router-dom”;

3. In your functional component calluseNavigatehook to getto browseFunction.Useto browsefunction to programmatically navigate to a specific route:

   const HomeComponent = () => { const navigation = useNavigate(); const handleButtonClick = () => { navigation('/o'); }; Returns (
    Go to About 
   );};

byuseNavigatehook you can programmatically navigate between routes in React Router v6 without depending on themlubricantIngredients. It provides a flexible and convenient way to handle navigation logic in functional components.

use story hook

Ousage historyhook is available to access the history object, which allows you to navigate and manipulate browser history programmatically. Provides a way to interact with the history stack and control application navigation.

1. Matterusage historycourt ofreact-router-dompackage:

   importar { useHistory } de "react-router-dom";

2. In your functional component callusage historyhook to gethistoryobject:

   const HomeComponent = () => { const historia = useHistory(); // ...};

3. to usehistoryan object to navigate, return, or perform other operations:

   (Video) React Hooks in ONE Video 2022 [ EASIEST Explanation ] | React JS Tutorial

   const HomeComponent = () => { const historia = useHistory(); const handleNavigation = () => { historia.push('/o'); }; const handleGoBack = () => { historia.goBack(); }; retornar (
    Go to About to go back 
   );};

In the code above, we call a methodusage historyhook to gethistoryobject. We define ahandleNavigationthe function it usesPresscalled methodhistoryobject to navigate to the desired route when clicking the button. We also define aCherry GoBackthe function it usesto go backway to return to the previous page.

byusage historyhook, you can accesshistoryobject and have full control over navigation and history management in React Router. It allows you to browse, rewind or manipulate browser history programmatically for a smooth and interactive experience.