Questions tagged [use-state]

useState related questions for reactjs hooks api.

Basic React Hook

useState

const [state, setState] = useState(initialState);

Returns a state value, and a function to update it.

Resources

useState hook reference

Common Questions/Issues

  • Why isn't React state update immediate?
  • How to access the latest value?

useState set method not reflecting change immediately

3329 questions
3
votes
3 answers

Avoiding stale state in double useEffect?

I have two useEffect hooks in a component (InternalComponent) that displays a single data item. One useEffect tracks a count as state, POSTing to a database when the user increments the count. The second useEffect resets the count when the item…
Suriname0
  • 527
  • 1
  • 8
  • 21
3
votes
1 answer

How to use useState hook with formik

I am making an authentication page following a tutorial but they create an array for useState, How do set or use this inside my formik form onChange like this they did. const [email, setEmail] = useState(""); const [password, setPassword] =…
3
votes
2 answers

using useRef in input to avoid re render in appication

I want to implement useRef so that the component in which my input tag is should not re-render on value change. If we use useState it will re-render the entire component on every key pressed. This is how we usually do it but this will re-render the…
Pinak faldu
  • 79
  • 1
  • 7
3
votes
2 answers

Disable submit button if element found in array in react

I want to disable the submit button on the form if the user enters a value that already exists in the task list. 'Todos' is the array that stores the list and I used 'some' to check if the input value is equal to some title. However, it doesn't…
Study
  • 85
  • 1
  • 3
  • 8
3
votes
2 answers

React useState not updating

I'm learning React and I know this subject has been covered by many questions, but they all are focused on the asynchronous nature of useState. I'm not sure if that's what's happening here. I also tried a version in combination with useEffect, and…
Karol Skrobot
  • 450
  • 3
  • 19
3
votes
1 answer

react-hook-form and useState (toggle)

I have the following use case: A user wants to toggle whether a profile is active or not. Configuration: Next.js, Fauna DB, react-hook-form I use useState to change the state on the toggle, and react-hook-forms to send other values to my Fauna…
3
votes
2 answers

React/Browser - Does any data get stored on a user's device with a useState hook, post a page refresh?

Given a use-case where there is a need for users to input data into a React application for the purposes of on-the-fly calculations. However, from a security perspective, the user-inputted data should not be persisted on the user's device, or within…
3
votes
1 answer

React.js Prevent Scrolling to top after re-rendering

This is an expansion on a previous question asking how to prevent scrolling to top after re-rendering by state changed(sorted state) I coded auto-sorting table with useState and useEffect. my code on codesandbox is getting random number every 3…
reaver lover
  • 624
  • 7
  • 20
3
votes
1 answer

Unclear benefit of "setLoading" state in React axios

Hey, could anyone tell me what the state loading does? What do we aim to achieve using the "setLoading(true)" wihtin axios? Thank you!
aluuusch
  • 83
  • 2
  • 10
3
votes
3 answers

What's the difference between passing a value and passing a callback in a React setState hook function?

Let say I declare a local state using React hook useState() : const [count, setCount] = useState(0); Later I would like to update the state and trigger the re-rendering: Set the state by passing the value
3
votes
4 answers

Waiting for react state to update in function component

How can I make sure that handleOpen only executes after all the states (nameError, emailError, messageError) have been updated? My problem is that since state doesn't update immediately, sometimes handleOpen executes when it shouldn't. const…
prs99
  • 71
  • 1
  • 8
3
votes
1 answer

Getting "InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable" when trying to update state variable onChange

Good day I can't seem to figure this one out. I'm getting "InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable" let me explain: I have a CustomUpload component: export const CustomUpload = ({ name, children,…
Tyler Thomas
  • 120
  • 1
  • 8
3
votes
2 answers

React Conditional state update not working

I am trying to create a form where user can create course paid/free , If paid then choose the price but if free price=0, This is my default state: const [values, setValues] = useState({ name: "", description: "", category: "", …
3
votes
1 answer

i want the useEffect to run only when the props is changed. not on initial run

In the below code the useEffect changes to loaded state to true when the component is loaded let [loaded, setLoaded] = useState(false); console.log(props.result.meanings); useEffect(() => { setLoaded(true); }, [props.result]); if…
Sophie
  • 29
  • 3
3
votes
2 answers

Put the `response.data` value into the `setState[]` array

I want to put swr data into setState[] I have code like this. const { data } = useSWR('/api/data', fetcher); const [contents, setcontents] = useState>([]); How can I write code to put data in setcontents[] ?
minsu
  • 121
  • 1
  • 1
  • 8