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…
I want to store React component in react useState but i think it is technically is wrong. What you think about that. Example const LayoutContext = createContext(null as unknown as { setSidebarContent: React.Dispatch<React.SetStateAction<null | React.ReactNode>>; }) const Layout = ()…
Here in my React the clean up function is not executed when re-rendering: import React, { useRef, useState } from 'react'; export default function App() { const [x, setX] = useState(2); const d = useRef(null); return ( <> <p ref={(node)…
I'm using a dockerized react+express+nginx stack. For some reason, I can only use hooks inside a few Route components from react-router-dom v6. Example: App.jsx <div className="App"> <Routes location={state?.backgroundLocation || location} > <Route path="/" element={<Layout />} > <Route index element={<TitleScreen />}…
Please go to this codesandbox example to and understand and reproduce the issue below. Context I am using Ag Grid to do server side pagination on a public paginated API (Pokemon one) as explained here, and display result in the…
I am trying to create a React hook that will detect if the user has just refreshed the page. The hook should return true only on the first interaction after the page refresh. On subsequent mounts or interactions, it should…
At the moment the votes {count} is not showing up on mount. I'm using useEffect to get the article and useState to set the count to article.votes. The votes go up after clicking the button twice as the first render…
Strict Mode is triggering my reducer function twice which is expected. What I didn't expect was the returned state to have duplicated elements in it. What I realise is I'm not using useReducer correctly, but I don't know how to…
Currently I am mapping through a list in my react component: const items = useMemo(() => { return items.map(item => { const element = useSearchResult(item) }) ... }, [dependencies]) I am aware that calling a hook inside a useMemo is…
I am trying to create a custom toast to show error notification. Toast visibility is depends on the isShowed from the props. export type ToastProps = { color: 'error' | 'success' | 'warning'; message: string; isShowed: boolean; }; const Toast…