Closed silviuaavram closed 6 months ago
============================
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
- What is Strictmode in react Ans : Strict mode rander two times react app in developement mode such as :
Ans :
=================================
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)
===================================== Before This Issue Appear I want talk you friend Actually why use useReducer And How to actually this hook use
Why use useReducer
How Use This Hook
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"})
Ex:
function reducer(state, action) {
switch (action.type) {
case "CLICK": {
console.log("Click Event Called");
break;
}
case "MOVE": {
console.log("move Event Called");
break;
}
}
}
===============================
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>
);
}
I must have missed the StrictMode, thanks for pointing in out! Will continue the investigation on my end.
Re-did the repro. Will update the description and reopen the ticked.
hello @silviuaavram
Check the description
On Thu, 9 Nov 2023 at 14:29, Jyotiprakash-Redapple @.***> wrote:
hello @silviuaavram https://github.com/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 ?
— Reply to this email directly, view it on GitHub https://github.com/facebook/react/issues/27666#issuecomment-1803938514, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACWAZACCS3EVNZYOYHST6UTYDTSEZAVCNFSM6AAAAAA7CW5NNSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMBTHEZTQNJRGQ . You are receiving this because you were mentioned.Message ID: @.***>
hello @silviuaavram
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
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.
yes @silviuaavram it is unexpected behavior React.js 18
yes @silviuaavram it is unexpected behavior React.js 18
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!
React version: 18.x.x
Steps To Reproduce
Repro Sandbox: https://codesandbox.io/s/rough-water-w3fh5k?file=/App.js
This extra click seems to happen only when the element also has an onMouseMove handler attached to it, and which in turn triggers a dispatch.
Our problem in
downshift
comes from the fact that we are adding both click and mouse move handlers to an element, both which can trigger state updates. This issue impacts our users that want to migrate to React18 and expose their Selects / Comboboxes for mobiles.