38,705 questions
Best practices
2
votes
11
replies
264
views
Code Review on using two useEffects in a single component
In the following code I have a header, which is being used in a Route Layout called RootLayout.tsx which is a parent root to my whole application. First I implemented the scroll hiding mechanics, and ...
1
vote
3
answers
126
views
Rerender same component with new route params
I have a category page that is supposed to display category info depending on the category route.
My route is:
<Route path="/category/*" element={<CategoryPage />} />
I can have ...
- 1,778
-1
votes
2
answers
129
views
Why is callback reference not observed in useEffect
How do I render a div in a component conditionally based on a component property and the get a reference to that div when it's available?
In this simplified example, the message displayed in the div ...
- 1,674
-1
votes
1
answer
138
views
How to access browser APIs on mount in React: useState vs ordinary variable vs useRef vs useSyncExternalStore
I haven't found an official stance in React regarding what to do if you need to check whether a component has been mounted for certain actions (especially since this component might be used in ...
Best practices
0
votes
5
replies
107
views
Why does useEffect run multiple times even with empty dependency array
I am using useEffect with an empty dependency array , but it runs more than once, my goal is to fetch data from API only when component mounts. why does this happen in React and how can i ensure the ...
6
votes
1
answer
82
views
How to use useMemo with dynamic per-record paths in TypeScript React dropdown?
I'm working on a React table where each row has a dropdown with actions (Edit, Delete).
I want to optimize performance using useMemo, but I'm stuck because each row needs a
different path based on the ...
- 43
1
vote
1
answer
3k
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
83
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
77
views
Set Data Twice in react-signature-canvas [duplicate]
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,944
0
votes
1
answer
208
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, ...
- 367
2
votes
1
answer
226
views
React 18 streaming chat messages updating with stale state [closed]
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 ...
- 77
Best practices
0
votes
2
replies
110
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
2
replies
711
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
4
votes
1
answer
106
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 ...
- 167
3
votes
1
answer
202
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 ...
- 189
