Problems with re-render component - javascript

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.

Related

How to make a child component of a sibling component refresh when a button is pressed in ReactJS?

So I have searched for solutions but I cant seem to find one that fits with what I am doing. Here is the structure of my website:
https://ibb.co/Xz27rgK
So as you can see I have my "NavBar" component outside of the Router because I always want it rendered. But I have a Dark mode toggle on the navbar, and when I click it I want it to update the refresh the Chart component (It is a react-chartjs-2 chart).
I know you can use setState(); to rerender, but how tell the Chart component to do that from the NavBar when I run the onClick(); function that I have inside of it?
For one component to trigger a re-render of a sibling component, or a child of a sibling, they must trigger a re-render of some shared parent component. In this case it would make sense for all components to be children of a single root component since the theme should be consistent across the entire project, unless you have some specific use case.
Probably the easiest way to do this is to pass in a callback setTheme as well as a theme attribute from the topmost component. In the setTheme callback, you should call the setState of that topmost parent component, which will then trigger a re-rendering of every child component with the new theme.
Take a look here for a more detailed description of how to change the theme of react components.

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

React Portal Functional Component

I have a problem to render an input field with an portal.
When I change a the value of the input, it looses focus.
I think it´s because of rerendering on state change.
https://codesandbox.io/s/zk0w1jv6rp
Does anybody know a solution?
UPDATE
Is there a way that the Bar-Componet will be reused? Lets say I could add something like a key property, so that react knows that it´s the same component and can reuse it.
Its because each time HelloReact component re-render, you are defining a new Bar component and creating a new Bar component, that is not a good approach.
Simple solution is use autoFocus, so each time when it create a new Bar component, it will focus the input element.
Working code.
Better way would be to define Bar component outside of HelloReact component and pass the value and onChange event handler in props. In that case you don't need to use autoFocus.
Example.

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.

Categories

Resources