38,748 questions
-6
votes
0
answers
109
views
What are problems with this pattern in these situations? What is a less problematic pattern? [closed]
I have a particular situation where I need a component (ViewOne) to update a ref, and read from that ref on mount. I also have a second component (ViewTwo) that needs to render different content ...
- 161
2
votes
1
answer
16k
views
How do I update array of objects in Zustand?
I am trying to update the masterSteps variable inside the store, but the store is undefined. That's why it is saying MasterSteps is undefined, but in similar way the setRoute method is working and ...
- 31.4k
Best practices
0
votes
3
replies
72
views
Using setTimeout within useEffect() to debounce searching in react native pagination
I am planning to implement pagination into my project for my data from Supabase, I had the idea that since there are different parameters (such as search text, page number, filter) that I should use ...
- 207k
2
votes
1
answer
65
views
React 18 streaming chat messages updating with stale state
i’m building a small AI chat ui in react (next.js app router, react 18) that streams tokens from my backend (openai style stream). basic flow:
user types a prompt
i push the user message into ...
- 207k
1
vote
1
answer
2k
views
Confusion with useState, useEffect and useRef in React
My app is recipe search. A search form and a submit button, and recipe results i get from API.
I have query state variable (declared with useState() ) I try to update it with onSubmit function on ...
0
votes
2
answers
124
views
Unable to make useEffect work in a react project
I'm working on a react project where I'm trying to fetch a GET api using useEffect react hook. But the useEffect doesn't seem to work and it gets skipped and rest everything works. I tried the same ...
- 760k
4
votes
3
answers
4k
views
Custom react hook useToggle in Typescript
I wrote custom hook for toggling booleand valuse:
import { useState } from 'react';
export function useToggle(initialValue: boolean) {
const [value, setValue] = useState<boolean>(...
- 84
-3
votes
0
answers
36
views
Updating state in React.js but there is a lag of one element [duplicate]
const onChangeFn = (e,i) => {
const data = e.target.value;
if(/^\d?$/.test(data)){
let new_Array = [...values]
new_Array[i] = data;
setValues(...
- 29.6k
3
votes
2
answers
14k
views
How to start and stop timer display?
I am trying to create a Pomodoro timer in ReactJS. I am having trouble having the timer to stop it's countdown.
PomView.js
const PomView = () => {
const [timer, setTimer] = useState(1500) // ...
- 14.4k
0
votes
1
answer
14k
views
Uncaught TypeError: Cannot assign to read only property of object '#<Object>'
For the code I am currently working on, I have a very complicated array filled with objects.
The point of this page is to change one property of one object in the array at a time, and as is such, the ...
CommunityBot
- 1
4
votes
3
answers
14k
views
How to update useState into TextInput
I have a simple <TextInput> in React Native and i want to print some text when value change. Its working after second character entered, but not, when user press just one char.
I try using ...
3
votes
1
answer
469
views
Wrap usePreloadedQuery in a custom hook
I'm new to working with react-relay and graphql.
I've taken the initiative to create the custom hook below and I'm wondering if this is the correct way to do it or if it goes against the recommended ...
- 943
2
votes
1
answer
3k
views
How to use SignaturePad with React TypeScript
I'm trying to implement the SignaturePad in my react project and I can draw the signature, but I can't access the properties in order to clear it or save it. I get the error below on the lines:
ref={...
- 2,092
Best practices
0
votes
2
replies
143
views
When should I use useTransition() or startTransition in React
I have been exploring the useTransition() hook and the startTransition() method provided by React with version 18+.
The documentation states that we can de-prioritize state updates using them so that ...
- 207k
0
votes
2
answers
339
views
Snippets in VSC - useState snippets
I want to make a useState snippet. I have this code, but I want to create the first uppercase letter in the variable that is linked to "set".
"useState hook": {
"prefix&...
- 302
5
votes
3
answers
18k
views
Hard dealing with Error: Minified React error #321 - ReactJS
I am building my React App and suddenly I get the following error:
Error: Minified React error #321; visit
https://reactjs.org/docs/error-decoder.html?invariant=321 for the full
message or use the ...
298
votes
6
answers
462k
views
Can I set state inside a useEffect hook
Lets say I have some state that is dependent on some other state (eg when A changes I want B to change).
Is it appropriate to create a hook that observes A and sets B inside the useEffect hook?
...
- 29.1k
0
votes
4
answers
2k
views
Button Copy to Clipboard window location href
I want to copy the current window.location.href onClick in the button, even if i set the right state i can not actually copy it, what is my problem?
Here the code
const [copyHref, setCopyHref] = ...
- 1
2
votes
1
answer
172
views
react-signature-canvas not working in ant design Modal
When I put my SignaturePad inside of an ant design component library Modal component, it is not able to generate the base64 image.
When the code reaches the trim function in the signaturepad, the ...
- 2,092
8
votes
2
answers
9k
views
Use react-redux useSelector with typescript
When trying to use the new useSelector hook (see below example) of react-redux typescript gives an error that the function does not exist:
Module '"../../../node_modules/@types/react-redux"' has no ...
CommunityBot
- 1
3
votes
2
answers
6k
views
How to properly update an array inside a react hook state
I've been trying to update the object inside an array that represents a React state, the object should be updated when the value of an input is changed, I could find a way myself to update it, but I'm ...
- 760k
1
vote
3
answers
10k
views
How to get the input type=file's value?
I have this element:
<input type="file" id="newFile" onChange={handleFileChange} />
<input type="text" id="newMessage" onChange={handleMessageChange} /&...
- 14.4k
0
votes
2
answers
2k
views
What is the best key for an element in a list? [closed]
Imagine I have this array of objects
fullList = [
{label: "item A", id="itemA", someBool: true},
{label: "item B", id="itemB", someBool: true},
{label: "item C", id="itemC", someBool: true},
...
- 14.4k
3
votes
2
answers
5k
views
How to make setTimeout trigger a state change re-render?
I'm currently running into some issues whilst developing a TypeScript React app.
Underneath is my current code but it's not behaving like I would want it to behave.
So what I would like to achieve is ...
- 14.4k
440
votes
21
answers
480k
views
How to use componentWillMount() in React Hooks?
In the official docs of React it mentions -
If you’re familiar with React class lifecycle methods, you can think
of useEffect Hook as componentDidMount, componentDidUpdate, and
...
- 7,016
0
votes
0
answers
126
views
Promise's behaviour inside component without using `use` hook [closed]
In this example from react docs, I can remove use hook from const messageContent = use(messagePromise); leaving it like this const messageContent = messagePromise; and it still works (no error is ...
356
votes
5
answers
540k
views
Set types on useState React Hook with TypeScript
I'm migrating a React with TypeScript project to use hooks features (React v16.7.0-alpha), but I cannot figure out how to set typings of the destructured elements.
Here is an example:
interface IUser {...
- 123k
-2
votes
2
answers
133
views
Why useEffect gets executed before child components rendered?
I have unexpected behaviour. The user variable that I declared at the top of my App component is null by default.
At the first start or refresh of path=/, useEffect of the App component gets executed ...
- 760k
4
votes
1
answer
729
views
React Native scrollTo target element
I'm new to React Native. I made a simple app with the latest version in a functional component.
I'm trying to achieve on leftside icon onPress right side scroll to that element and this is two ...
- 2,061
-2
votes
0
answers
18
views
Implementing useState to set variable as the results of an Axios call in useEffect [duplicate]
I am attempting to retrieve a search result from a MySQL database with Axios. res.data is populated with the correct data but when I use my useState setter inside the useEffect, my searchRes variable ...
5
votes
1
answer
10k
views
React Lazy Load useEffect
I have a problem getting clientWidth from useEffect.
There is a lazyLoad which loads a page with users.
import {Suspense, lazy} from 'react';
const UsersContainer = lazy (() => import ('./ users / ...
CommunityBot
- 1
5
votes
2
answers
13k
views
What is useEffect in react [duplicate]
I recently started learning React, and I learn the useState hook, however I'm struggling to learn the useEffect hook.
I've looked at the documentation searched it up and also watched a video about it ...
- 3,180
3
votes
1
answer
92
views
useEffect is running a function an additional time instead of once per if statement
I have a modal. This modal opens after a user uploads a CSV. They can then make changes to the entries or delete them. The user can Confirm & Continue (go to next page, modal closes) or Upload New ...
- 207k
20
votes
3
answers
15k
views
Should I wrap all functions that defined in component in useCallback?
As far as I've known, functions that defined in a React's functional component are regenerated whenever the component rerenders. Since useCallback can be triggered by specific dependencies, it ...
- 43.2k
3
votes
1
answer
94
views
useOptimistic: How to handle race conditions when multiple optimistic updates affect the same state slice?
I'm building a collaborative task management app using React 19's useOptimistic hook. Multiple users can update task properties (status, priority, assignee) simultaneously. I'm running into race ...
- 14.4k
807
votes
26
answers
592k
views
useEffect() is called twice even if an empty array is used as an argument
I am writing code so that before the data is loaded from DB, it will show loading message, and then after it is loaded, render components with the loaded data. To do this, I am using both useState ...
- 14.4k
38
votes
7
answers
94k
views
How to trigger useEffects before render?
I have a prop being passed from a parent component to a child component which changes based on the user's input.
I want to trigger a data fetch in the child component when that prop changes before the ...
- 14.4k
0
votes
1
answer
9k
views
React hook useSelector value not changed inside async function
I've been using React Hook with useSelector and useDispatch for a while, mostly it works very well but recently I've experienced some very weird scenario.
For example:
// parentComponent
const ...
CommunityBot
- 1
113
votes
22
answers
192k
views
"Error: No QueryClient set, use QueryClientProvider to set one"
I was trying React Query and got this at the start of my React app.
import React from 'react'
import { useQuery } from "react-query";
const fetchPanets = async () => {
const ...
- 829
1
vote
1
answer
4k
views
use react hook form with custom TextInput
I'm trying to use react hook form with custom TextInput. Before I was using materials input and everything was working correctly. A found one way that I can achieve it but I'm not satisfied with that.
...
- 103
2
votes
2
answers
6k
views
Why is my Checkbox (Material-UI) not updating? I am using useState, useEffect, alongside with Checkbox from Material-UI
Why is my checkbox (Material-UI) not updating? I am using useState, useEffect, alongside with Checkbox from Material-UI. This is especially weird because the {isLiked ? <p>liked</p> : <...
- 61
9
votes
1
answer
20k
views
Why I get this error: Cannot read properties of null (reading 'useState') on my react package?
I am creating a React component library for a Credit Card Form and the CreditCardForm.tsx looks like this:
CreditCardForm.tsx:
import React, {useState} from "react";
interface ...
0
votes
2
answers
140
views
Why does useEffect on [] gets called on hot reload?
app/page.tsx
"use client";
import { useEffect, useRef } from "react";
import { foo } from "./OrdersModuleFoo";
import React from "react";
const OrdersModule: ...
- 207k
2
votes
1
answer
94
views
React - useContext - code executed 2 times in provider
This is my structure about code:
src
App.js
pages
ConfigurationPage.jsx
provider
ConfigurationProvider.jsx
context
ConfigContext.jsx
Explain bug:
The code is executed 2 times in provider.
The ...
- 41
2
votes
1
answer
292
views
useEffect vs useSyncExternalStore for browser APIs that change?
Could not find a valid source for what's better for this usecase, so...
What't better for listening for browser DOM events and changes? the old fashion useEffect+useState or the new ...
- 3,686
-1
votes
1
answer
342
views
React synchronously remove an item from the dom
I need to synchronously remove a child from the container. I created a simplified code to show my current solution (Which makes use of normal pattern using useState hook)
type ChildProps = {
index: ...
- 29.6k
2
votes
2
answers
473
views
Why useEffect's dependency array's variable's size has to be constant between renders?
I was changing a state between renders and logging that value on every time the state changes via useEffect. I noticed my console is showing this error bellow:
image of console showing the error.
[...
- 2,001
21
votes
4
answers
4k
views
React useId creates invalid selector
I am trying to get the element by id. (It's an example code to reproduce the error)
function MyComponent(){
const myId = useId();
useEffect(() => {
const myComponentDOMElement = document....
- 82.1k