Develop Reference

React with Hooks: When do re-renders happen?

When will a React component using hooks re-render?
Let's assume the component:
Manages state with useState
Receives props from its parent
Will a re-render happen directly after the following events, and only at those points in time?
Component receives new props
state is updated
Related Question
Let's assume the component has several useState expressions and a user interaction causes multiple states to update.
Will the component re-render multiple times, once per state value that changed, or will it batch these related changes into one single re-render?

A component will re-render in the following cases considering it doesn't implement shouldComponentUpdate for class component, or is using React.memo for function
Component receives new props
state is updated
Context value is updated(if the component listenes to context change using useContext)
Parent component re-renders due to any of the above reasons
Let's assume the component has several useState expressions and a user
interaction causes multiple states to update.
Will the component re-render multiple times, once per state value that
changed, or will it batch these related changes into one single
re-render?
useState doesn't merge the updated values with previous ones but performs batching like setState and hence if multiple state updates are done together, one render take place.

Found this nice article on this topic. I'll add the summary in case someone needs a quick read.
What causes a render in react?
State modification
Component re-renders when its state is manipulated, simple as that. So, when you modify the state of your component it tends to re-renders with the new state value.
Passing Props
If the parent component has triggered a rerender all the child component will rerender too, generally you would only want the specific child components to rerender only if the component is consuming some props or the passed props are modified but that isn’t the case, it does not matter if the props are consumed, modified or not, the child components will re-render if the parent component has triggered a render.
Using the Context API
When modifying the state which is also the value passed to the context, the whole child components tree would get rerendered. Again doesn’t matter if the child component is consuming the context data or not, it will still rerender. The rerenders depend on the value passed to the provider but still, all the whole components tree would get rerendered.
Passing down references
In case of an object, array and, function comparison is based on references i.e. the exact memory location so, their comparison even though they seem equal yields false, in React Object.is method is used to compare the different values.
Example:
{}==={} //false
[]===[] //false
{a: 5}==={a: 5} //false
[1,2,3]===[1,2,3] //false
(when comparing the previous state to the new state, it returns false because they do not have the same reference. Only the value is the same)

Mobx #observer components and autorun renders

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

List of events, that cause React component to re-render

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().

Possible to only re-render one prop of component in react-native, not whole component?

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.

reactjs forceUpdating another 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.