Comments (10)
Re-did the repro. Will update the description and reopen the ticked.
from react.
ISSUE SOLVE @silviuaavram #27666
============================
React 17, one dispatch call per event: https://codesandbox.io/s/unruffled-volhard-x92hq6?file=/index.js
React 18, two dispatch calls: https://codesandbox.io/s/hrzt3k?file=/App.js&utm_medium=sandpack
- Both of those version not produce bug in dispatch
- Some bug exist on React 17 But it solve in React 18
- What is Strictmode in react
Ans : Strict mode rander two times react app in developement mode
such as :
- lagacy context api
- reusable state
- any unexpected behaiviour in sideeffect
- Identifying component life cycle
- Other kind of issue
-
Why the issue linked with Strict mode
Ans :
- In React.js 17 in Strict mode the app rander only one time . but it not solve this type of problem .
- But React.js 18 Solve the Issue and In Strict Mode The app rander two times always in developement
but not in production . it not effect in production not add any extra UI in Dom tree - You just Go to this link
- React 18, two dispatch calls: https://codesandbox.io/s/hrzt3k?file=/App.js&utm_medium=sandpack
- remove the strict mode it beheviour you expected .
CODE
=================================
root.render(
<StrictMode>
<App />
</StrictMode>
);
**after this code check devtool console **
root.render(
<App />
);
**after this code check devtool console **
![Screenshot Capture - 2023-11-09 - 13-00-14](https://github.com/facebook/react/assets/139202727/7c180008-315e-463a-bc4c-cbe09870c7e3)
from react.
Your Componenet RELATED ISUUE SOLVE @silviuaavram #27666 #bug
=====================================
Before This Issue Appear I want talk you friend Actually why use useReducer And How to actually this hook use
Why use useReducer
- in simple word useReducer just like useState , but advantage we can manage multiple state and add complex logic that not good to stay with useState hook
How Use This Hook
- this hook pass two argument fast argumet is a function techWord called Reducer fn and second argument is initial state .
- it return a array where fast index is the current state and second index is a function by help we can change state value .
Ex:
const initialState = {};
const [evect, dispatch] = React.useReducer(reducer, initialState);
-
BUT BUT BUT, as we chnage normal state value we can not change state value directly use of this function, then how change ............
-
State value change only use reducer function that pass fast argument to the useReducer hook .
-
yes, we can pass special type of object where must contain a property name TYPE that defined what type of action .
Ex:
dispatch({type: "INCREMENT"})
- When we call this function it directly call the reducer function .
- In reducer function fast argument is initial state value and second argument what type of action
what value return in this reducer function that is current initial state value
Ex:
function reducer(state, action) {
switch (action.type) {
case "CLICK": {
console.log("Click Event Called");
break;
}
case "MOVE": {
console.log("move Event Called");
break;
}
}
}
FULL CODE
===============================
import React from "react";
const initialState = {};
function reducer(state, action) {
switch (action.type) {
case "CLICK": {
console.log("Click Event Called");
break;
}
case "MOVE": {
console.log("move Event Called");
break;
}
}
}
function Button() {
const [evect, dispatch] = React.useReducer(reducer, initialState);
return (
<button
onClick={() => dispatch({ type: "CLICK" })}
onMouseMove={() => dispatch({ type: "MOVE" })}
>
Touch me
</button>
);
}
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<Button />
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
from react.
I must have missed the StrictMode, thanks for pointing in out! Will continue the investigation on my end.
from react.
hello @silviuaavram
- The Reducer function triggers only when call the dispatch function if you not call the dispatch function then not trigger the reducer function.
- could you give code suggestion on how this type of scenario happen ?
from react.
from react.
hello @silviuaavram
Solve : useReducer triggers reducer one more time in React 18 Responsive Mode #27666
-
finally, I found not a solution but it is not a bug it is actually how react works and re-render components and re-print UI
-
React.js Work in Two phase one is rendering and 2nd is comit to dom .
-
The render phase determines what changes need to be made to e.g. the DOM. During this phase, React calls render and then compares the result to the previous render.
-
The commit phase is when React applies any changes. (In the case of React DOM, this is when React inserts, updates, and removes DOM nodes.) React also calls lifecycles like componentDidMount and componentDidUpdate during this phase.
-In the future, we’d like to add a feature that allows React to add and remove sections of the UI while preserving state. For example, when a user tabs away from a screen and back, React should be able to immediately show the previous screen. To do this, React will support remounting trees using the same component state used before unmounting. -
This feature will give React better performance out-of-the-box but requires components to be resilient to effects being mounted and destroyed multiple times. Most effects will work without any changes.
-
To help surface these issues, React 18 introduces a new development-only check to Strict Mode. This new check will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount.
-
If you not add Strict mode also it render multiple time
- Conclusion is this Reducer hook is a state updater it, so sometimes it behaves like this.
- Reducer is a pure function it can not affect your UI
A function must pass two tests to be considered “pure”:
- Same inputs always return same outputs
- No side-effects
from react.
Thanks, @Jyotiprakash-Redapple. It may not be a bug, but it's a different behaviour between 17 and 18 and I need to understand how to address it, as it affects a lot of my users. Updated the code with the type
in order to follow the API, but the issue still stands.
from react.
yes @silviuaavram it is unexpected behavior React.js 18
from react.
yes @silviuaavram it is unexpected behavior React.js 18
from react.
Related Issues (20)
- Bug:
- Google Translate causing "Text content does not match server-rendered HTML" HOT 1
- Bug: useFormState formAction becomes null in strict mode HOT 1
- Bug: Source is not showing in 5.0.2 HOT 9
- Question and suggest: The official identifier of Server Compnoent and Client Component HOT 3
- Bug: when installing the application, the old version of "react-scripts" is installed HOT 1
- Bug: Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string. HOT 4
- Bug: optimistic state (useOptimistic) shows both optimistic and returned from server data when running several async actions HOT 6
- [DevTools Bug]: React Profiler reports higher hook numbers than shown in Components HOT 2
- about the react performance (how to improve it) HOT 3
- Bug: use() hook HOT 4
- Bug: Flight (RSC) examples are not accessible HOT 1
- useMemo reruns when the dependencies not changed when memoised value is a fn HOT 3
- Bug: [Flight] Async server components in `ai/rsc` not rendered correctly HOT 1
- Bug: React Dev tools extension showing wrong source file path on inspection HOT 4
- Bug: Using the hook useDeferredValue - Suspense fallback didn't show the contents HOT 4
- Bug: react-intl formatMessage cannot format message with param that neat by Single quotation mark HOT 3
- custom use directives + using closure serializer
- In react fiber, is didReceiveUpdate related to dirty checking?
- Naming convention HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react.