38,748 questions
-6
votes
0
answers
105
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
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 ...
- 57
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 ...
-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(...
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 ...
- 49
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 ...
- 27
-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 ...
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 ...
- 125
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 ...
- 158
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: ...
- 21.5k
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
0
votes
1
answer
125
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
402
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
103
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
96
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 ...
4
votes
2
answers
153
views
will calling window.location.reload() trigger the clean up function inside a useEffect?
useEffect(() => {
console.log("Effect runs");
return () => {
console.log("Cleanup runs");
};
}, []);
If window.location.reload() is called anywhere in your ...
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 ...
- 5,622
-1
votes
1
answer
62
views
Balance between useEffect only render once and useState value to reflect inside useEffect [duplicate]
I have this working component that renders useEffect only once when I open the page with the use of cleanup function
export const MyComponent = () => {
useEffect(() => {
const fetchApi = ()...
- 1,047
-5
votes
1
answer
94
views
Sidebar React: When clicking a submenu, the parent menu unexpectedly collapses/flashes
I'm implementing a Sidebar in React with expandable menus and submenus. The state of open menus is managed using an openMenus object in the state, and I'm using react-router-dom for navigation.
The ...
0
votes
2
answers
114
views
Can initializing useState with a value act as a cache and prevent recomputing that value?
This may be a simple question but in our UI app we have a pattern my team has used to wrap an object of translation strings from i18next into a state which is never updated. The idea is, the ...
- 679
-1
votes
1
answer
129
views
How to redraw canvas every time a react state variable changes and then stop it based on a condition using the same state?
I'm new to React and trying to build a component using HTML Canvas that draws very simple simulated water ripples. I have my functions working when I manually click buttons but every time I try to ...
- 133
-1
votes
1
answer
108
views
Transformers.js pipeline error with React useState: "text.split is not a function" [closed]
I am trying to use transformers.js to build a simple chatbot to answer questions related to my resume. The error is as below:
TypeError: text.split is not a function
at closure._encode_text (...
1
vote
2
answers
109
views
Does calling a custom hook inline inside another hook's arguments violate the Rule of Hooks?
As far as I know, all hooks in React should be called at the top level of a component or custom hook — not inside conditions, loops, or expressions. But I recently stumbled upon a code pattern that ...
- 39
0
votes
0
answers
37
views
localStorage dissappears after refresh. The array resets [duplicate]
I was following along a React project tutorial and writing the exact same code to the last bit but noticed that although the favorited movies would be saved to localStorage, upon refresh the array ...
-1
votes
1
answer
86
views
UseMemo or Regular Variable Declaration in React
Let's say I have a variable that depends on a prop, and I declare it in a simple way:
const isLeapYear = year % 4 === 0; // year is a prop
Now, let's imagine I have a complex function, and I "...
-1
votes
1
answer
91
views
How do I re-execute UseEffect whenever user comes to viewport?
I am using two UseEffect to generate a hypertext effect which scrambles and rearranges itself.
First UseEffect is for when it should be animate the text, and the second UseEffect is for how should it ...
0
votes
2
answers
81
views
Not updating state variable which is array of objects
perms is an array of objects. Each object is:
{
catg: 'Catg1'
serv: ->array of serv objects
{
checked: false,
desc: 'Serv 1'
}
}
On button click, based on ...
- 195
-1
votes
1
answer
71
views
React useState instantly calling the function I store in it as variable on re-render? [duplicate]
I am trying to make a filehandling system where you can delete the documents from the list of documents with the Delete button next to them. Upon clicking it, the usual pop-up window appears, asking ...
- 33
-1
votes
1
answer
44
views
Race state lags one step behind when cycling through array [duplicate]
I’m building a simple character selector in React + TypeScript. I fetch an array of race objects from data.json, store them in state, and let the user cycle forward/backward through them with “...
-3
votes
1
answer
208
views
React router with zustand causing to many or to few rerenders
I'm at a loss. No idea whats happening. I have a zustand store set up. Using react router with vite. I'm not even sure why react router is throwing errors becuase this component im trying to finish ...
1
vote
1
answer
77
views
Custom hook inside custom hook pattern
I use Tanstack Query in my project and have arranged my api interactions like this (see below). Basically I made a custom hook inside which there are other hooks that do data fetching. In my opinion, ...
- 263
0
votes
1
answer
92
views
Is there some useEffect and useState behavior that explains why only one of these instances work?
I'm using useEffect to fetch data. This data is passed to a state, then used as a prop for a component to render/populate accordingly. Here is the code that works:
const [projects, setProjects] = ...
1
vote
0
answers
41
views
Why the clean-up function of useEffect does not get the latest value of a state? [duplicate]
I have this section of code which will get the profile picture of a user and display it using createObjectURL and release the URL when i navigate away. The problem is that the avatarURL does not hold ...
- 23
0
votes
2
answers
107
views
Why is the second character missing and an undefined character added in my typing effect? [duplicate]
I'm working on a simple typing effect component in React using Framer Motion. Here's the code for my TypingText component
TypingText.jsx
import { motion } from 'framer-motion';
import React, { ...
- 1
-1
votes
1
answer
163
views
"React Hook useEffect has a missing dependency", but including it or removing the dependency array both make for incorrect behavior? [duplicate]
I am working on a React page that has a built in file manager.
I have a DocumentTable.js component, which is responsible for displaying the current list of files available, and it has (among others) ...
- 33
0
votes
2
answers
147
views
Apollo client cache not being reset after calling client.resetStore()
I am getting an unexpected behaviour. That is, I have put a skip condition in the query and even when the skip condition is supposed to be true, the query is being run. I have made a minimal ...
- 159
1
vote
1
answer
36
views
React Native useState rules
I have read that the rules for using React's hooks are:
Don’t call Hooks inside loops, conditions, or nested functions.
Instead, always use Hooks at the top level of your React function,
before any ...
- 277
3
votes
2
answers
171
views
I cannot figure out why ProtectedRoute wont re-render after updating useState
I would like the ProtectedRoute to call server and get a response that indicates whether the user is logged in or not, on every render of a page that it protects. The server is sent a session cookie ...
- 307
0
votes
1
answer
53
views
Remix (React) Waiting for Submit to complete without useMemo
I have a table where the last column is a button that triggers an action which in turn queries the DB, returns a result and downloads the result as a csv. In order for the data to be processed and the ...
- 2,744
-1
votes
1
answer
78
views
Why is useEffect running in unexpected manner?
my route looks like this:
<Route path="game/:room_id" element={
<GameProvider>
<Game />
</GameProvider>
} />
Game.jsx(partial) ...
0
votes
0
answers
140
views
React Hooks (useState, useContext) not working when importing Vite-built redesign modules into CRA project
I'm working on updating a large React application ("webapp-front-end") by creating a new module-based redesign. The idea is to gradually migrate and refactor the UI using TypeScript. The new ...
0
votes
1
answer
62
views
How come visiting child component loses functionality?
I have an app that has a 3 JSX files:
one for controlling states
import React from "react";
import CreateRisk from "./CreateRisk";
import TablePage from "./TablePage";
...
- 33
-1
votes
1
answer
57
views
Understanding useEffect() usage in Next.JS Error Handlers
I am looking at examples about error boundaries for Next.JS components in the documentation.
'use client' // Error boundaries must be Client Components
import { useEffect } from 'react'
export ...
- 121
0
votes
1
answer
62
views
ReactJS : anonymous function accesses an old memo state
I'm learning ReactJS, and performance optimisation. I just stumbled on a case I just cannot explain.
Below is the smallest code I could write showing the "issue" / strange behavior.
I have ...
- 21
3
votes
1
answer
66
views
Why does consoling prints the same value but state gets updated when used inside useEffect - React
In a video I saw creating a progress bar and updated its value using state and wrapped it inside setInterval for updating it every 15 millisecond and the whole being wrapped inside useEffect, with no ...
- 45
1
vote
1
answer
89
views
Can't successfully test a custom hook using useState and useEffect
While learning React, I'm trying to understand custom hooks.
I've created a simple one updating an internal "step" on creation, cleanup, and allows for external updates.
But I'm struggling ...
- 13
0
votes
1
answer
69
views
How can I prevent useEffect from removing a similar effect?
I have a custom hook that detects whether a user clicks inside a given element or somewhere else. It works fine when used alone on a single page, but when I use two instances of the hook, the ...
- 110
-1
votes
1
answer
44
views
React typescript useReducer issues
I'm learning react and typescript. I'm trying to build a todo app with useReducer but im getting some errors. Don't know if they are connected or not.
My code is the following
import { useReducer, ...
- 481
0
votes
1
answer
91
views
React get data from children context inside the parent component
I'm trying to set up a form with many rows of data, with each individual items. When I click a button, I want to get all of the data from each children, and submit the form.
I'm using context to ...
- 185
1
vote
2
answers
285
views
I'm using React Router v7.20 and getting this error in my Account.jsx component [closed]
The error happens when I refresh the page or navigate between "/account", "/account/bookings", and "/account/places".
import React, { useContext } from 'react';
import { ...
- 19