score:2
please, stop using
useselector(state => state.mainreducer);
it doesn't make any sense
there should be a simple state transformation (subselection)
const a = useselector(state => state.a)
taken directly from redux docs:
const counter = useselector(state => state.counter)
update
you can see effect (from store change) with slightly changed component
function mycomponent(props) {
const a = useselector(state => state.a);
const dispatch = usedispatch();
console.log('render: ', a);
useeffect(() => {
console.log('use effect: ', a);
dispatch({ type: 'a', payload: a });
}, [a])
useeffect(() => {
console.log('did mount: ', a);
dispatch({ type: 'a', payload: 1 })
}, []);
return (<view style={styles.container}>
<text style={styles.text}>{a}</text>
</view>);
};
it should result in log:
render: 0
// initial stateuse effect: 0
// first effect run- // dispatch
0
... processed in store by reducer but results in the same state ...
// ... and in our rendering process we still working on an 'old'a
readed from state on the beginning of render did mount: 0
// 'old'a
// dispatch1
... changed state in redux store.... rendered text
0
...
...//
useselector
forces rerendering - change detectedrender: 1
// latest dispatched value, processed by reducers into new state, rereaded by selectoruse effect: 1
//useeffect
works as expected as an effect ofa
change- .... rendered text
1
...
...
- no more rerenderings - latest dispach not changed state
of course dispatch from other component will force update in this component ... if value will be different.
score:5
your both dispatch are called after first render so even before your second render value is 0 so your second useeffect won't be able detect change as there is no change.
let's see what is happening in your render method
first render:
a = 0
first useeffect: dispatch({ a : 1 })
second useeffect: dispatch({ a : 0 })
so now in your redux store a is 0.
second render
a = 0
first useeffect: doesn't run as there is no dependency
second useeffect: doesn't run as a hasn't changed.
Source: stackoverflow.com
Related Query
- useEffect not working when dependency value changed
- useEffect array dependency is called in every render when array is not changed
- Mobx - UseEffect hook not executing when item in dependency list is changed
- useEffect is not being called when dependency is changed
- ReactJS useEffect not rendering after dependency changed
- React useEffect hook does not fire when prop dependency changes
- Draft JS editor does not update it's content when its value changed by parent component?
- useEffect keep getting executed every time even dependency not changed
- <meta> not working when initial-scale is changed
- In React useEffect does not update after the value has changed from other component
- Mobx-react does not update component when observable.map value is changed
- React.useEffect not triggering when dependency has changed
- Default value with react-select, checkboxes not working when I want to post my data having a blank page output
- useEffect not working when I update the state from another component
- rule validation not triggered on input field when value is changed from React state
- useEffect not getting dependency value updated
- Proper understanding of dependency array in useEffect when working with Redux Thunk
- State variable inside a function defined within useEffect hook is not updating when value changes
- React: setState value not working when refreshing the web
- Keyframes animation not working when multiple instances of a Component rendered with different props?Width used for animation depends on a prop value
- Async useEffect does not execute entire body when dependency changes
- useEffect is not getting call first time when parent state is changed by child state at
- React Hook useEffect has a missing dependency when updating state based on current value
- Unable to update a list with react when its value is being changed using the hook useState function from React TypeError: map is not a function
- antd cascader's default value if not working if set it in useEffect
- onClick not working when I attempt to change value of variable
- why clearinterval() is not working inside useEffect with empty dependency
- Is there a way to modify a value when its changed after rendering without useEffect
- useEffect hook is turning into infinite loop even when the dependency is not changing all the time
- React input value to array not working when using onClick
More Query from same tag
- How do I use material ui date clicker on a regular css element?
- Change an element on mouse click on an image
- ReactJs TypeError default.a.render is not a function
- React state not setting
- How to pass img src as a parameter in a stateless function in next js?
- REACT JS - Firestore: How to check documents to validate existing documents and avoid duplicate documents
- I cant use framer motion when using <navigate/> react router dom v6 to auth my login page
- Modularize routes in react-router
- Material table next page not working when i click it
- Unable to get _id from db in react with axios. for a delete function
- "Cannot read property 'then' of undefined" when dispatching action
- How to solve webpack2 error: You may need an appropriate loader to handle this file type?
- Is it possible to remove and readd React eventListener within the handler function?
- Material UI Auto Complete Rotate icon on expand or collapse
- Typescript - IntrinsicAttributes and children type issues when typing React components
- Redux-Saga Getting undefined on componentDidMount()
- Styled Components Color Picker not showing
- Composition In React with params
- How do I render different views of Navbar based on user authentication?
- Gatsby language localization (language change using one button)
- Theme UI sx prop ignored when importing a storybook component
- Populate react-select field field from firebase
- Jest/Enzyme: Error: Uncaught [TypeError: Cannot read property 'query' of undefined] on component wrapped in withRouter
- Reselect error: Selector creators expect all input-selectors to be functions
- Mozilla PDF - how to view PDFs from url in react app?
- Import react-table into ClojureScript with Shadow-CLJS
- Reactjs! Make Span tag clickable
- How to update state inside array of objects on specific filed which is also array as on below code in REACT?
- Warning: Each child in a list should have a unique "key" prop - I don't need to loop over this
- Access the `access_token` property in localstorage