Develop Reference

React passing a variable between two components

I have two components in my React app.
My header component contains a slider. Now i want to trigger an event in my other component when the value of the slider changes.
I tried to use callback functions but i got a error witch said: To many rerenders

Use setState in a parent component. Use state will render all components again when setState is used. If the header and sidebar are both in an index. Then use the setState in the index file. Passing the data into the 2 components.
You can find a whole lot more about this here. https://beta.reactjs.org/learn/responding-to-events

Problem of re-rendering useEffect with watch all fields using React Hook Form

I using a lib React Hook Form for a form with checkboxes inputs. I don't understand whats wrong in this code. This code re-render a useEffect with dependency. This behavior not verified when a just try render a single checkbox input. Someone have a idea, for use a map function to render multiple inputs, without this re-render ?
I create a sandbox with this code https://codesandbox.io/s/react-hook-form-watch-c9xgu?file=/src/index.js

You are using react-hook-form watch method. this method will re-render at the root level of the app whenever a field value is changed.
for better performance you can use useWatch instead, it will only re-render at the component level.
Please have a look at the official docs here

Problems with re-render component

I have the next situation,
I build a react native app, using design patter:
Container-Presentational.
Focus on the problem: When I update props, in component A, I need that the B component change too, when I switch the screen to this
B component, I need B component re-render with this new props.
You need to know I am using redux to storage the props, and this
component shared navigation.
The main problem is that I cant found one life cycle method where I can re-render component with this new props because the component was
rendered, I can´t join in anyone life cycle method.
I can't share the code I'm sorry, but the idea is this:
Having component A and B and these depend on a that depending on their value will show one thing or another.
Example: When I change the value of the picker in component B and then I go to component A, the value of the picker is still maintained.
but the information that should be displayed in component A is still the one that corresponds to the previous value in the picker and not to the current value.
Until now I have been able to solve it in the following way but I don't know if it is the optimal one.
inside the onValueChange of the picker, where I do the ditpatch to update the data of the component itself, I also do the ditpach of the other component.

Proper use of state in React

I am new to React and a bit struggling with state in React and how and where we need to use it. So far, I found out that "If modifying a piece of data does not visually change the component, that data shouldn’t go into state". So, state is all about re-rendering the UI(I hope I am correct). So, the question I want to ask is Is it true that we use state only for re-rendering the UI only?, nothing else and nothing more?

You can use state in your class components. State is like private data of your component that may change by action made by user.
State is immutable. This means you can not change state directly in following way this.state.someVal = "smth". The only way to change state is using this.setState() method.
When you change state value React automatically re-renders your component without refreshing the page. In other words React.js reacts to your changes

State is an object that is directly tied to rendering the component. The reason why you can't change State directly with say this.state.foo='bar' is that React would have no way of knowing that it needed to re-render the component if you did that. Thus there is a setState method to change the state, which under the hood calls the render function of your component.
Therefore, if you have some data that has nothing to do with rendering the component, you don't want to put it into state, as setting its value will cause unnecessary renders to occur. If you're using class components, you can just put that data on the class directly: this.foo='bar'.

Basically yes! Two examples might be: A - holding a list of items (shopping list, or todo items) that are rendered directly to the UI, that are subject to change as the user adds and removes items. B - a value that determines whether or not you want something to show up on your UI, for example, you might have a state value called 'showNavbar' that is either true or false, depending on whether you want the user to see a navigation bar.
I hope that helps make sense of it in a basic way :)

We use the state for rendering the UI.
Also, I think the State allows React components to change their output over time in response to user actions, network responses, and anything else, without violating this rule.
For this, We use the 'setState' method.
setState() is the only legitimate way to update state after the initial state setup

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.