Let's say I have two React components Parent and Child that are both #observers of some state managed by Mobx. If the child uses a Mobx value outside of it's render method say in componentWillReceiveProps() will that value/observable become tracked by the parent component's render autorun?
Thanks
No, unless the value is read by the parent and pass as prop value to the child
No it wont . Mobx just takes care of the updating the stores and wiring and the store data with the component . unless you pass the data to the child component
Related
when i changed the key prop of react componet, i think it will destory the component immediately, but in fact, it excuted re-render and then destory the component, it makes me confused
Is there any way for the component to be destroyed directly without re-rendering and then destroying
No, that is not possible, because whenever a prop changes for a component it will re-render when the props do not comply with what you are trying to do in the component the component is destroyed.
I am trying to understand dispatch, reducer, and action in react (ContextApi). But my question is: While we can change anything in the child component from the parent component, why do we need to use "setState" inside of child components? I mean if I want to change something in the component, if I can change it from a parent,(which I can with dispatch, reducer and action), i wouldn't use the SetState function inside of the Component. If you can help me, I would be so happy. Thanks!
You don't need to use setState. You can just pass the dispatch function as prop if you need to control the state within the child component.
Using setState in a child component is useful if, you for example need to filter the input or change the state locally before rendering. But all this can be achieved without usestate.
But if you are trying to learn reducers I don't really get the question the hook in the child component can just be another reducer in case you want to control it independently.
I want to know, what are events, that cause React component to re-render.
I couldn't find full list anywhere, it'd be great if someone writes the list of events, that cause React component to re-render.
I always find the following reference website helpful.
http://reactcheatsheet.com/
Filter by lifecycle events, and you can see the places where setState will trigger a rerender.
__
Update: you now have to filter by "misc"
React component is re-rendered when setState() is called or when props change. You can also force re-render with forceUpdate()
https://reactjs.org/docs/react-component.html#forceupdate
By default, when your component's state or props change, your
component will re-render. However, if these change implicitly (eg:
data deep within an object changes without changing the object itself)
or if your render() method depends on some other data, you can tell
React that it needs to re-run render() by calling forceUpdate().
I know that it is possible to re-render only one component (instead of whole DOM) using shouldComponentUpdate(), but is it possible to only re-render one PROP of one component? In one instance in my app I do not want the entire component to update, but only a specific prop that is being changed.
You probably can't do that because that's not how it's supposed to work. The component is updated in order to reflect all changes made to its state and props. The best way to get around this would be to just not update the props being passed by the parent component.
Alternatively, you could also use the state to hold the values you don't want to be updated, and set these values in the constructor of the component.
I have been using redux .. i am changing state tree using using redux actions ...
sometimes updating the state does not refresh the component .. i have to force update by this.forceUpdate() .. why is this happening? Under what condition does this happen.. usually updating state tree using an action automatically refreshes the component but sometimes it does not.. another question is that what if the state change needs to re-render a different component ?? how to i force update other components from another component ??
Are you sure what your return new object from your reducers?
If your return the same object (only mutated) redux does not understand what data has changed.
If you need rerender component when data change that that component should be dependent on these data. forceUpdate is a really bad practice.