Questions tagged [react-18]
153 questions
2
votes
1 answer
Automatic batching in React 18 is not working?
So, I have a controlled input component and have a div that takes another state variable. The two states are updated in a single call-back function. Why the value in the input and the text in the div below are not synched?
`import React, {useState,…
Eli K
- 21
- 2
2
votes
1 answer
Ideal method to make API calls in useEffect in strict mode
In React 18, there is mount -> unmount -> mount in strict mode for various reasons. I am trying to place an API call in the useEffect hook and I am trying to figure out what is the best way to write a cleanup such that the API call is not triggered…
AKT
- 942
- 6
- 16
2
votes
0 answers
nextjs get slow on route change in react 18 and redux(legacy and toolkit)
the issue is: when we use react 18.0.0 to 18.2.0 the app takes around 7 sec on production to change the route. on development mode everything is fine.
I am facing this issue since the release of react18, We were using old school redux and face this…
Nima Malaeri
- 37
- 1
- 6
2
votes
2 answers
Slow input even with useTransition()
I'm playing with the new useTransition() hook added in React 18.
I created an app highlighting the matching names. If it matches, the item gets green, otherwise red. Here how I did it:
import { useState, useTransition } from 'react';
import people…
Robo Robok
- 21,132
- 17
- 68
- 126
2
votes
2 answers
Display background color based on selection of the menulink
Goal:
When you press one of the menulink, the classname 'active' should be applied next to classname 'default'
If you press another and new menu link, the previous classname 'active' should be removed and the new selected menulink should have…
HelloWorld1
- 13,688
- 28
- 82
- 145
2
votes
1 answer
How to send HTTP Headers during/after HTTP Body stream? Is there spec work on this?
Today, HTTP headers all need to be sent before a single bit of HTTP body is sent to the browser.
This is especially problematic with new technologies such as React 18 Streaming where certain headers, such as caching headers and 103 Early Hints, can…
brillout
- 7,804
- 11
- 72
- 84
2
votes
3 answers
React 18 displays ReactDOM.render warning even though I switched to the new standard
I have switched to React 18 and followed official guide on how to change root's render method.
Here is my root's render code:
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root') as…
ablaszkiewicz1
- 855
- 1
- 10
- 26
2
votes
4 answers
react 18 typescript types in package.json
Im trying to upgrade my react 17 to 18
"@types/react": "???????",
"@types/react-dom": "????????",
"react": "^18.0.0",
"react-dom": "^18.0.0",
What should I put in @types/react and @types/react-dom ?
Thanks
SexyMF
- 10,657
- 33
- 102
- 206
1
vote
0 answers
createPortal react 18 not rendering the component
I'm trying to use the createPortal method to render an API error message in my ErrorSnackbar component. However, when an error occurs, the component is not rendering as expected.
axiosInstance.interceptors.response.use(
(response) => {
return…
Ankur Sharma
- 51
- 3
1
vote
1 answer
How to use less in react
I want to use less in react18, before that I installed and configured "@craco/craco", but when executing "npm i craco-less -D", the console prompts an error, I searched a lot without finding it, looking forward to your reply!
Console error…
xu Han
- 29
- 4
1
vote
1 answer
How to solve Strict Mode Re-render issue
I have react code that works like so:
const [screenStream, setScreenStream] = useState(null);
useEffect(() => {
getPermissionsAndStreams();
}, []);
const getPermissionsAndStreams = () => {
getDisplayStream()
…
Will Taylor
- 1,994
- 2
- 23
- 36
1
vote
1 answer
How to move away from componentWillReceiveProps
As componentWillReceiveProps is deprecated, How do we migrate the below code?
componentWillReceiveProps (nextProps) {
if (nextProps.reloadData && nextProps.realoadDataId) {
this.props.onChange({target: {id: 'reloadData', value:…
Siva
- 61
- 1
- 5
1
vote
1 answer
Add Test Cases to test out the React 18 Strict mode behaviour of mounting component twice
In React 18 strict mode, Component first mounts, unmount and remount again. I want to add a test case in my React app to test this behaviour.
I am using karma, jasmine frameworks in my application. Currently didn't find how can we mount. So using…
Kotana Sai
- 1,207
- 3
- 9
- 20
1
vote
0 answers
Firebase TypeError: Cannot read properties of undefined (reading 'indexOf')
I'm making an eccomerce web app using next13 and firebase, I want my cart component to be visible when shoppingCart.length>0 Here's my code for Cart.jsx:
"use client"
import React, {useState, useEffect} from 'react'
.
.
.
import { getDoc, doc, …
Masrur Sakib
- 21
- 3
1
vote
1 answer
Infinite loop when using React Suspense and Axios data fetch
I'm trying to fetch data with Axios and display it in a suspense element, like in this tutorial: https://dev.to/darkmavis1980/a-practical-example-of-suspense-in-react-18-3lln
However, the wrapPromise function gets me in an endless loop:
function…
BTC
- 2,975
- 1
- 19
- 25