PopupState HelperTo make managing the popover state easier, we can use the material-ui-popup-state library to manage the state.

Frontend frameworks are a positive sum game! Svelte has no monopoly on the compiler paradigm either. Just like I think React is worth learning for the mental model it imparts, where UI is a (pure) function of state, I think the frontend framework-as-compiler paradigm is worth understanding. We're going to see a lot more of it because the tradeoffs are fantastic, to where it'll be a boring talking point before we know it.

Recoil defines a directed graph orthogonal to but also intrinsic and attached to your React tree.

Component state can only be shared by pushing it up to the common ancestor, but this might include a huge tree that then needs to re-render.

For reasons of compatibility and simplicity, it's best to use React's built-in state management capabilities rather than external global state.

MobX - for me personally MobX is a far better way to manage state than React Hooks. It doesn't care about the UI layer so it can be used outside the React ecosystem, and it's simple to mutate data.

The state is a data structure that starts with a default value when a Component mounts. It may be mutated across time, mostly as a result of user events.

However, again you would have to lift state up to the App component in order to pass the amount to the currency components. As you can see, the component composition on its own doesn't help us to solve the problem. That's the point where React's render props pattern comes into play which enhances React's component composition with an important ingredient: a render function.

But it's not that simple, because the currency components don't know about the amount now. You would have to lift the state from the Amount component to the App component.

It makes sense that the incoherent render would not be committed to browser and that it would not have any consequences most of the time. But that means that you render logic must be ready to manage incoherency between props and states without crashing. E.g. a list of resource ids in props that doesn't match a list of http requests from a previous id list in the state could lead to weird situations. This is a worry that didn't exist in class components.

you can update the state right during rendering. React will re-run the component with updated state immediately after exiting the first render so it wouldn’t be expensive

However, if more control is needed, you can pass any of these pieces of state as a prop (as indicated above) and that state becomes controlled. As soon as this.props[statePropKey] !== undefined, internally, downshift will determine its state based on your prop's value rather than its own internal state.

The question is not “when does this effect run” the question is “with which state does this effect synchronize with”