score:2
Accepted answer
you just forgot most crucial part - every component that uses any observable value needs to be wrapped with observer
decorator! like that:
const contactpopup = () => {
const { appstore } = usestore();
const handlecancel = () => {
appstore.setcontactformopen(false);
console.log('close contact from', appstore.contactformopen);
};
return (
<modal
title="contact us"
visible={appstore.contactformopen}
oncancel={handlecancel}
>
<h2>modal open</h2>
</modal>
);
};
// here i've added `observer` decorator/hoc
export default observer(contactpopup);
and you don't need useeffect
or anything like that now.
Source: stackoverflow.com
Related Query
- MobX changing but not rerendering components
- Changing state but not rerendering react redux
- when my route is placed in child components url is changing but component is not rendering
- In React-Router-Dom, my link is changing the url but it is not rendering matched components or passing any props to this.props.child
- I am changing the state, but subscribed components are not rendered
- React not rerendering after mobx observer change
- Redirect changing page URL but not rendering new page
- mobx observer suddenly not rerendering when observable changes
- Redux - State is updating but React components are not
- React redux - parent state changing, but child components not re-rendering
- <Link> only changes the url when click but not the components and the page
- Error when styling React components imported from index file, but not when importing directly from component file
- React router redux Link changing route, but not component
- URL changing but view is not changing in React Router 4
- React HOC working on some but not other components
- Browser URL updates but components do not update along
- React useState with "deep" array not rerendering components
- React Mobx - Change store from other store not render observer components
- React url change but components not rendered until manual refresh
- React 18 router changing url but not component
- Webpack hot module replacement lists updated React components in console but does not update them
- ReactJS - React Router not changing component but url is changing
- React router changing path but not rendering component
- React Router Dom components rendering in App.js, but not as separate component
- I want to use RTL, but not through all of my components
- I'm trying to use useEffect' for changing window. I do not get any error, but it doesn't work. What is wrong? How to make it work?
- Why can I nest Styled Components but not ordinary React Components
- React router is changing the URL but not loading the webpage properly
- React Redux Reducer triggered but not changing state
- React Router history.push() changed url but did not rendered components content
More Query from same tag
- React Flow Chart : Automatic Layout
- Passing a parameter using React
- How can I evaluate text response as code in Javascript/React
- What is the best way to secure Firebase API keys in a react app so it is not accessible publicly?
- React Router 1.0 - replace # and get rid of ?_k
- How to fix "Expected to return a value in arrow function" with reactjs?
- Avoiding re-renders for controlled inputs in a React Flux application
- this.setState not updating the state unless I pass the whole object to it
- How to map data that we get from database to UI?
- How to push props to a new page on button click?
- React.useCallback : it doesn't prevent continuos re-rendering
- CK Editor cannot set toolbar location (react js)
- React App - Div is centered on local host but not when deployed to github pages
- Cannot read properties of undefined (reading 'map')
- how to add text in canvas with react and canvg library?
- Typing defaulted passthrough props in React with TypeScript
- Typescript: How to dynamically add a method to a function with autocompletion?
- Updating state from Formik onSubmit handler causing useEffect to fire twice
- React autoplay <video /> (mp4) only when visible
- React TypeScript Error : TS2322 - Type '' is not assignable to type 'IntrinsicAttributes & String'
- How to include my Index.html in webpack Production build
- Maxlength property of input field is not respected
- How do i deconstruct a javascript user object to display on an account page?
- converting react classes to functions with redux
- React troubles with showing notification bar from another .js file
- Handling Pre-Fetched Dynamic Client Routes in Gatsby / @ReachRouter
- Adding an item to react state dictionary
- Switch case return multiple component
- React json list
- Keep components between routes using react-router