38,739 questions
1
vote
1
answer
136
views
Calling setState synchronously within an effect can trigger cascading renders
I get the warning "Calling setState synchronously within an effect can trigger cascading renders" for my useEffect:
useEffect(() => {
if (positionData.length > 0) {
const ...
- 41
0
votes
1
answer
70
views
Weird behavior of event listener added in a useEffect block
I am learning React and was setting up a component that makes usage of useEffect and there is one case that I don't understand so I set up this minimum reproducible example:
App.js:
import { useState }...
0
votes
0
answers
69
views
Set Data Twice in react-signature-canvas
I have a signature canvas on a form. When the form loads an existing report, it may already have signature data to load. In that case, in a useEffect, I call fromData on the signature component to ...
- 7,925
0
votes
1
answer
153
views
React useEffect cleanup function not executing
I have a page that on load, executes the following effect to retrieve data from a server
const nav = useNavigation();
const loc = useLocation();
const [card, setCard] = useReducer(statefn, ...
- 343
2
votes
1
answer
114
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 ...
- 79
Best practices
0
votes
2
replies
85
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 ...
Best practices
0
votes
3
replies
255
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 ...
- 49
3
votes
1
answer
93
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 ...
- 125
3
votes
1
answer
124
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 ...
- 167
0
votes
2
answers
156
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: ...
- 21.5k
2
votes
1
answer
108
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
0
votes
1
answer
126
views
useEffect not running when ref.current is removed from dependency array in React
I'm using a DynamicForm component with a ref in a React functional component. I want to update the form once my Firebase collection is loaded. Here’s the relevant part of my component:
const ...
- 53
-1
votes
1
answer
517
views
Is it still necessary to use 'useEffectEvent' function [closed]
When I read the react document, I found a new feature useEffectEvent, which raised a question.
If I use responsive variables A and B in useEffect, but I am very sure that it is meaningful to make the ...
- 17
2
votes
1
answer
105
views
Prevent useEffect from running on token state change immediately after login in React
Im developing a new app and tried to implement authentication with JWT myself (and with ChatGPT). I will try to explain it as briefly as possible and what I think is happening.
// Render the app
const ...
- 162
0
votes
1
answer
104
views
How do I properly use `useEffect` cleanup in React to avoid memory leaks? [duplicate]
Can't perform a state update on an unmounted component.
I understand that this warning happens when the component unmounts before the asynchronous request finishes, and then setState (or in my case ...
