Develop Reference

Why would we use SetState while we can change Component's values from parent component?

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.

How to use React hooks state from one component to another Component

I am trying to get data from one component to another in react using hooks.
App.js --
|---------Sidebar.js------------
| |---SidebarBody.js
|
|---Chat.js------
|----ChatBody.js
This is my directory tree, in this when a button is clicked in SidebarBody.js hooks state is updated with the input value data and then this state data I have to use in ChatBody.js for further processing.
So what can I do for this please tell in reference to react hooks.
I have attached my codes Screen Shot.
In this image I have add my both SidebarBody.js and ChatBody.js component code.

You can try defining all the state you want to pass inside your App.js and just pass it from there. Or you can use context but its slightly more difficult to set up.
Context example

React/Redux - When to use state and props / when to change props

My current understanding of mapStateToProps() is to map the currently set Redux store to any prop you want set within a component. I also know that props are variables that are passed to the component andstate` within the component is just a concurrent group of variables that are being utilized.
What is confusing me is that I am seeing on many sites/docs that you should never change the props.. Surely mapStateToProps() is physically changing the components props and goes against this ethos?
Here's a scenario, say we are wanting to show a loading symbol while some backend process is being run, I can create a dispatch that will set IS_LOADING= True, if I wanted to apply this value to show the loader in my component I would apply this to a prop loading in the component, however when the component first loads wouldn't it error on running mapStateToProps() as state.loading does not exist yet?

What is confusing me is that I am seeing on many sites/docs that you should never change the props
That means you should not change props from inside component. The idea is that parent creates props for the child. If props change components rerenders.
however when the component first loads wouldn't it error on running mapStateToProps() as state.loading does not exist yet?
It should not happen if you configure your store properly. Store is created on the top level, so when your child component initializes store is already present. So you have to configure your initial state properly. E. g. set initial isLoading value to false.

React avoid re-render

For a project, we want to have notifications visible throughout all views in the app.
The sidebar menu allows users to move between views, and is on the same level as the notification component and the websocket component react-stomp. The router is used to change the view on the next level depending on the selected menu item.
Our problem is that if a new message arrives, we need to pass it down to the view as props, and of course this triggers a re-render of the entire component.
Is there a way to avoid this rerender?
We would like to avoid redux, though we are aware it is a possible solution.

By default, if props changes react will trigger re-render. If you want to avoid rendering a componenet you can use the hook shouldComponentUpdate(nextProps, nextState)
Quoting React's documentation:
Use shouldComponentUpdate() to let React know if a component’s output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior.
For further reading visit their docs

Have you tried experimenting with react lifecycle event hooks ?

You could use REACT CONTEXT API if you want to avoid using a state manager like Redux or MobX

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.