Questions tagged [react-18]

153 questions
1
vote
0 answers

Recoil React: Use a state variable immediately after setting it

const tempFahrenheit = atom({ key: 'tempFahrenheit', default: 32 }); const [tempF, setTempF] = useRecoilState(tempFahrenheit); const handleClick = (temp: number) => { flushSync(() => { setTempF(temp); }); …
Jackson
  • 11
  • 2
1
vote
0 answers

Why is React.useId() returning invalid ids?

A functional component is implemented like this : const TestComponent = () => { const id1 = React.useId(); const id2 = React.useId(); const id3 = React.useId(); return (
{ JSON.stringify([ id1, id2, id2 ]) }
Yanick Rochon
  • 51,409
  • 25
  • 133
  • 214
1
vote
1 answer

Warning: Unreachable code , using funtion component (Arrow function) in Reactjs 18

I created a function component and return JSX in react 18, but I was getting a strange warning; that "Unreachable code" const Header = () => { return

hello

1
vote
1 answer

SSR in React18 using renderToPipableStream - Server Generated HTML and Client Side HTML file UI are not matching

I was trying to make Server Side Rendering using Node,Express and React18 feature. The method I used was with renderToPipeableStream and not with renderToString. Link for the CODE - GITHUB :…
user9151444
  • 31
  • 1
  • 9
1
vote
1 answer

React-18 Uncaught Error: createRoot(...): Target container is not a DOM element

I'm using React-18.2.0 in my project and I'm getting the below error Uncaught Error: createRoot(...): Target container is not a DOM element. I have tried most of the possible solutions that are uploaded to the internet, but unfortunately it didb't…
kiran
  • 444
  • 3
  • 15
1
vote
2 answers

Storybook vite failed to build with ChakraUI / React 18

I'm creating a UI library with Vite and Storybook. Sadly, the storybook build is broken. In dev mode, i have some error during build, but i can browse storybooks component anyway. But production build failed completely with same error. Here is the…
RGR
  • 41
  • 5
1
vote
2 answers

Replace DOM with JSX in React 18

How to remove this error message from my console I'm using ReactDOM.render to replace certain "unreachable" parts of my code with JSX components, it worked fine in previous versions but now I'm getting this annoying error message and I want to get…
HYAR7E
  • 194
  • 2
  • 10
1
vote
1 answer

Updating React 18 app to createRoot breaks mutations in TanStack/query

I use TanStack/query to handle mutations for registration/login to a Drupal 9 website. If registration is successful, I automatically log the user in. With React 17, the following code allows the user to register and then immediately logs the user…
Patrick Kenny
  • 4,515
  • 7
  • 47
  • 76
1
vote
1 answer

Hydration failed because the initial UI does not match what was rendered on the server. React 18, next link, error in my button component?

here's my custom button component: const variants = { primary: "btn-primary", secondary: "btn-secondary", delete: "btn-red", white: "btn-white", none: "", }; type IconProps = | { startIcon: React.ReactElement; endIcon?: never } | {…
squish
  • 846
  • 12
  • 24
1
vote
1 answer

How to programatically create a Modal in React 18

I did a function that creates a modal programatically for React 17, where you just needed to call a function to create a new modal. It was working fantastic before the ReactDOM.render was deprecated. Is there a way to replace the render function…
1
vote
1 answer

Uses createRoot in react but still got the depreciation warning about ReactDOM.render

I recently switch to react 18 and also find out that reactDOM.render is depreciated. I change accordingly and now My index.js is looked like import React from "react"; import { createRoot } from "react-dom/client"; import "./index.css"; import {…
1
vote
1 answer

; how can i put provider to use redux react 18 react native can some please explain to react native 0.69

AppRegistry.registerComponent(appName, () => App); /** * @format */ import {AppRegistry} from 'react-native'; import App from './App'; import {name as appName} from './app.json'; AppRegistry.registerComponent(appName, () => App); i cant find…
1
vote
1 answer

React SSR with custom html

I'm began to use Suspense to my react app and then I turned it to SSR, but while reading the docs: https://reactjs.org/docs/react-dom-server.html#rendertopipeablestream I do not see anywhere how to use a custom HTML, before we used to replace the…
1
vote
0 answers

React.StrictMode is always enabled

I am updating some apps to react 18. However I do not want to use strict mode on development. While searching how to disable "React strict mode" online I can see that all I need to do is not wrap my app in . However I am not…
TMLS_123
  • 93
  • 1
  • 1
  • 6
1
vote
1 answer

React 18 / RTK Query error: could not find react-redux context value. App *is* already wrapped in a Provider

For some reason I've started getting the above error after I updated React to v18. Is React 18 not compatible with RTK Query? I've tested this with normal redux slice and it works without issue but for some reason I get this error when I try to use…
Matt Herbstritt
  • 4,754
  • 4
  • 25
  • 31