Most voted "react-hooks" questions
Hooks is a new feature included in React 16.8 that allows developers to use state and other React features in a functional component. Use this tag for Hooks related questions (useState, useCallback, useMemo, useEffect etc.).
Learn more…143 questions
Sort by count of
-
20
votes3
answers2779
viewsWhat are React Hooks?
I would like to understand the concept and if possible with examples of this new Feature react. What will change in the way you create projects with React? The community seems to have enjoyed, what…
-
6
votes3
answers3708
viewsWhat is the difference between useMemo and React useCallback?
I know that useMemo and useCallback are two new Hooks React. However, I still don’t quite understand the difference between them. What’s the difference between "return a memoised value" and "return…
-
5
votes2
answers215
viewsDid "Class Components" die in React?
Before the React update 16.8 it was not possible for functional components to be internal, so Hooks arrived to solve this problem, so the functional components became the standard of React. Then the…
-
4
votes2
answers16832
viewsReact Hook useEffect has a Missing dependency: .... Either include it or remove the dependency array React-Hooks/exhaustive-deps
I’m getting the following warning when using the hook useEffect: React Hook useEffect has a Missing dependency: 'connect'. Either include it or remove the dependency array…
-
3
votes1
answer459
viewsHow to put objects in empty array with React Hooks
I have the following data set: const dados = [5, 10, 15, 20, 25, 50, 90]; const colors = [ "#52DF9A", "#FFCE1C", "#3570BD", "#3570BD", "#00B894", "#FB6B32", ]; And I’ve got the following state:…
-
3
votes1
answer37
viewsWhat’s the difference between using one or two Arrow Functions in Useeffect?
In this reply from Soen, one uses a useEffect with two Arrow functions followed. Thus: useEffect(() => () => { window.removeEventListener('resize', compareSize); }, []); I wonder why the duo…
-
2
votes0
answers219
viewsDoubt about useState refactoring when implementing the SWR?
I’m starting in this world of Javascript and I have a project that I’m developing that I did the implementation of SWR in the same and with that I stopped using the useEffect and the useState of the…
-
2
votes1
answer87
viewsProblems with "active" Reactjs
I’m trying to create a state to set an icon like active changing its color, but I am failing miserably for having little knowledge. I created a state with the useState and I set the value true by…
-
2
votes1
answer76
viewsDoubt about standard React class
I am starting my first steps with React, I would like to know why the class is not being created in React, when I run the command npx create-react-app creates the structure below. import React from…
-
2
votes3
answers905
viewsShare state React Hooks
I’m having trouble sharing states between components using React Hooks. Can someone give me a help? import React, { useState } from 'react' import Nav from './Nav' export default function Header(){…
-
2
votes1
answer78
viewsHow to exclude an element from the array if an equal value already exists?
I am trying to store the ID of some accounts that have been selected by a checkbox, that is I will have an array of all accounts that are selected, but I need that when it is unchecked, delete their…
-
2
votes1
answer416
viewsState returning wrong/late value
The application: by clicking on a button, an event onClick is fired and a fetch There is an API that returns data in JSON is performed. Right after this data is transformed into an object, the…
-
2
votes1
answer740
viewsHow to receive query params in React with reatc-router-dom?
I’m making an App, using React with typescript and React-router-dom. But I’m having a hard time working with query params on routes. My initial goal was just to receive the token and email that…
-
2
votes1
answer169
viewsBrowse array of React objects
I intend within my parent component to create a function that will scroll through all objects stored in the state of this same component, checking whether the given parameter is equal to the value…
-
2
votes0
answers482
viewsArgument of type 'Iaulasadicional[]' is not Assignable to Parameter of type 'string'
Opa, I have this problem in my code which I am not able to solve, follows below my code I hope you can help me!!! Stoned: "AulasAdicionais": [ { "Periodo": "1", "HorarioInicio":…
-
2
votes1
answer170
viewsProblem typing first parameter of React setState
Hello, I’m a little new to the typescript world and there’s something going on that I can’t explain why. I have the following state: const [estaExecutando, mudarExecucao] = useState(false); Step to…
-
2
votes1
answer73
viewsHow to use the React useRef hook with the Numberformat component?
I am using the lib react-number-format to take a value as formatted currency in my form and then save it to a state. Currently it is this way: <NumberFormat thousandSeparator={true}…
javascript react react-hooks number-format react-domasked 3 years, 3 months ago Danúbio Vieira Lima 397 -
2
votes1
answer72
viewsHow to optimize rendering on functional components in React?
In my studies on React Native I’m bumping into rendering optimization on components, specifically on functional components. It is known that any change in status or props, the default component is…
-
2
votes1
answer65
viewsWhat is it and why should I provide a "dependency array" for React’s Hooks?
Who has never forgotten to pass a "dependency" to the dependency array Hooks react? It’s an unfortunate burden that every person using React has to be aware of: passing the right dependency to the…
-
1
votes1
answer1390
viewsHow can I change only one property of an object using the useState hook
I wonder how I can change only a specific property of an object using the useState hook const [value, setValue] = useState({value1: "abc", value2: "abcd"}) How would it be possible to change only…
-
1
votes1
answer860
viewsreactjs - Maximum update Depth exceeded
I am creating a dynamic table, in which I save the row information in the localStorage. To render the table, I give a getItem in localStorage, a setRows on a map in the variable rows. const [rows,…
-
1
votes1
answer2673
viewsReact Hooks useEffect even with empty dependency runs more than once
I am using the React hook useEffect to fetch the data in an API, when the page loads, useEffect runs 2 times, but should run only once, since I declared the second parameter (dependency array) as…
-
1
votes1
answer123
viewsAlways rendering all the code, changing state!
With this scolding, I start generating this array with the 60 blank positions (initially) let [list, setList] = useState(Array(60).fill("")) Then with this array will serve to generate all 60…
-
1
votes1
answer718
viewsuseEffect not updating states in the first iteration
I’m using the useEffect to get the data from a table. The problem is that even if I receive the data from the api, the states are not updated in the first iteration, so I have to do two get in the…
-
1
votes2
answers1558
viewsPossible Unhandled Promise Rejection (React Native (HOOKS))
I am trying to call the API but is returning the warning error: "Possible Unhandled Promise Rejection". There are similar questions, but none specific to React Hooks from what I’ve seen. Follow the…
-
1
votes2
answers446
viewsResponse.data returns empty array (React Nativ(HOOKS))
When you require something from the backend, the return comes as an empty array. I tried both with map and with console log.. Source code: Reportscreen.js const [reports, setReports ] =…
-
1
votes1
answer25
viewsWhat would the same code look like in Reactjs using Hook to rescue the start of component creation?
With the code just below I want to simulate the same effect with React Hook in the componentWillMount method contained in classes for reactjs? Example below with code: class Example extends…
-
1
votes2
answers83
viewsBest Pattern to manage React component status with Hooks
Hello, everybody I’m starting with Reactjs Could someone ask a question, please? I was introduced to the two ways of creating components (of classes and functions), and chose to use ALWAYS functions…
-
1
votes1
answer282
viewsUse React components methods on Hooks
Next people, I have a flat list in my React Native app, where in it I need to use a "ref" to access her "scrollToEnd()" method, but how I’m using Hooks I can’t use the ref. Here’s an example of what…
-
1
votes1
answer3173
viewsuseState with array - React Native
Good evening. I am learning the Hooks and would like help to solve the problem of updating the useState value from an array. I have the code to follow: import React, { useState } from 'react';…
-
1
votes0
answers80
viewsRedux Hooks Reactjs - Trying to create a structure
I’m trying to create a login structure using Redux and Hooks in React.js. But I’m having an error that I’m not being able to understand why. Who knows good Javascript can help me. The reference…
-
1
votes1
answer1119
viewsJWT Token Refresh
I have an API that issues a JWT token with a maximum validity of 2h per token, after which it is no longer processed by my application. I need that every time this token is expired, a new token is…
-
1
votes1
answer332
viewsReact with Hooks, useState, the value sends to each input and does not show on the screen.?
I’m doing a compound interest calculation. I receive the form data valores.js, called by function enviarValores() with the onSubmit={handleSubmit(enviarValores)} and I want to send the answers…
-
1
votes1
answer57
viewsError in useEffect accessing API data
I have the following hook that runs the API calls smoothly, returning the information and updating the components normally, but it brings some connection errors in the console, I believe these…
-
1
votes1
answer284
viewsReact Native useState create loop input
I have an object as follows: var ItensMenu = [ {title: 'Nome', type: 'input', id: 'id1'}, {title: 'CPF', type: 'number', id: 'id2'}, {title: 'Data de Nascimento', type: 'date', id: 'id3'}, {title:…
-
1
votes2
answers362
viewsuseState does not work as expected
I want to do a simple mathematical operation from two random numbers when I click on the button, however, every time I click on the button the result shown on screen is from the previous operation…
-
1
votes1
answer417
viewsInfinite loop with useEffect and useCallback
As code below, I need to call a function whenever inView is true, but using useEffect and useCallback listing the dependencies, I cause an infinite loop. The only ways I could avoid were without…
-
1
votes1
answer29
viewsHow do Textinput print number 1 every time you press Buttom?
How to do the TextInput print out the number 1 every time we press the button? Example: if I press 5 times the button, I want "11111" to appear on TextInput. const App = () => { const state={…
-
1
votes1
answer69
viewsHow to change state of an object attribute with React Hooks
I have the following status with React Hooks: const [active, setActive] = useState({ card1: false, card2: false, card3: false, card4: false, card5: false, card6: false, card7: false, }); I would…
-
1
votes1
answer213
viewsHow to toggle the status of only one item in Flatlist?
I have the following code: const Sounds: React.FC = () => { const [hasSelect, setHasSelect] = useState(false); return ( <Container> <FlatList data={data} keyExtractor={item =>…
-
1
votes1
answer85
viewsShould I avoid using "optional chaining" within the dependencies of a Hook?
Today I noticed that I use the optional chaining (?.) within the dependencies of a hook: useEffect(() => { // ... }, [route.params?.addedProduct]); It seems to work as expected, at least for now…
-
1
votes0
answers86
viewsHow to apply context api with good practices?
I am studying React.js and to fix the contents I am developing an application (SPA), the case is that I found the code barely readable even after applying the context api to solve the prop Drilling.…
-
1
votes0
answers35
viewsFlatlist after creating a Scroll, to render correctly
After 7 to 9 names, when creating a Scroll for viewing, Flatlist starts rendering a name only after another is inserted, and this only happens in tests on Android, the web is working normally. GIF…
-
1
votes1
answer253
viewsIs it correct to use useCallback within a custom hook?
I’m having trouble using custom Hooks inside the useEffect, in particular, when defining within the useEffect custom hook methods that alter your internal state. Faced with this problem I came…
-
1
votes1
answer82
viewsCheckbox does not deselect in React Native
I’m using the hook useState, however it does not change the state when it is pressed again, it is always marked. const [isSelected, setSelection] = useState({}); const handleChange = (event) => {…
-
1
votes1
answer67
viewsHow do I test integration with mock from React?
I want to test the following component but I don’t know how to use jest mocks in case of a request with Axios. Component: import React, { useEffect, useContext } from 'react' import {…
-
1
votes1
answer44
viewsError in socket.io "expression cannot be called" in React/Next
I’m trying to make a Real Time Chat with socket.io with Next.js, but when it comes to importing and putting as constant is returning an error, I don’t understand because I’m about to make this code…
-
1
votes1
answer96
viewsHow can I create a tab scheme with React Hooks?
I am creating a system, and instead of putting the 'sub-categories' of entries below the menu, I am creating as tabs, when you click on each menu and then have the other accesses. Example: by…
-
1
votes1
answer41
viewsHow to include multiple texts in an array in the same function?
I’m trying to include in a array several messages that are in the same function. I receive some data and make some comparisons according to some requirements, resulting in a message that I need to…
-
1
votes1
answer49
viewsHow to use componentDidMount, componentWillUnmount and declare the initial state in functional components?
I’m trying to make a class component to functional component conversion. The code I have is: constructor(props) { super(props); this.state = SelectionToolbarStore.getState(); } componentDidMount() {…