I know this has been asked many times and the answer is always that the effect does not run when refs are mutated but that is not the issue because I run the effect every second until I have an…
I need a button to be enabled when all the checkboxes in a table are checked and disabled otherwise. Outer component with button: import Box from "@mui/system/Box"; import Stack from "@mui/system/Stack"; import ArrowBackIcon from "@mui/icons-material/ArrowBack"; import { useState } from…
I am trying to detect a variable change in react. The variable is a class property. That is set when an asynchronous event takes place. You can see below the example of my class. Inside method listenForIncomingMessage(), something asynchronous happens…
I'm not new to react but I'm also not super experienced and I wanted to ask some opinions about the proper ways to pass around data Now the current project we've been working on has redux and I've been told…
I got a strange behaviour in my react code: In development (strict) mode, the following component did not clear interval successfully in clear function when interval is set to 1000 milliseconds. If I change the interval to slightly larger value…
I'm learning about React hooks and I have a question about the useCallback hook. From what I understand, useCallback is useful for creating functions that you want to cache and reuse when the component re-renders (as opposed to creating the…
I'm trying to build a React web-app that allows people to solve chess puzzles. I used a chessground library to render the chessboard and chess.js library to handle chess logic. I created a component Board.tsx to use chessground library in…
I have a Next.js 14 project where I prioritize the use of server components over client components whenever possible. The layout is server-rendered, while component wrappers used within it are client-rendered. One of these components is instantiated multiple times on…
I am having a hard time coming up with a good approach for splitting business logic from a component. Due to different use cases, it has gotten too complicated and resulted in a long file. I've been attempting to split…
I have fallen into the too-many-rerenders trap while implementing my own hook. The hook itself looked like this: function useRegexValidate(value: string, regex: RegExp, errorMessage: string, deps: any[] = []): ValidationResult { const [result, setResult] = useState<ValidationResult>(ValidationResult.Valid); useEffect(() => { if…