I am using componentWillReceiveProps in many places in my application. Now, I have to replace them with either getDerivedStateFromProps() or componentDidUpdate(). First I thought of using getDerivedStateFromProps as it s alternative of componentWillReceiveProps as suggested react-native docs. But some people are highly recommending not to use this method, Instead suggesting to use componentDidUpdate. But for my requirement all new props must be set with the state before render. getDerivedStateFromProps is the best place to do so.
Hence, which one to use between getDerivedStateFromProps and componentDidUpdate?
From the React docs
https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops
getDerivedStateFromProps is invoked right before calling the render method, both on the initial mount and on subsequent updates. It should return an object to update the state, or null to update nothing.
Deriving state leads to verbose code and makes your components
difficult to think about.
Make sure you’re familiar with simpler alternatives:
If you need to perform a side effect (for example, data fetching or an animation) in response to a change in props, use componentDidUpdate lifecycle instead.
If you want to re-compute some data only when a prop changes, use a memoization helper instead.
If you want to “reset” some state when a prop changes, consider either making a component fully controlled or fully uncontrolled with a key instead.
Related
getDerivedStateFromProps is static for component. but today I debug the app, I find other components data nextProp.x in getDerivedStateFromProps method when we define it the same.
the other situation is when a component is re-created, the nextProp.x still remains the pre-data.
so when the react-native will remove the getDerivedStateFromProps data, why the data is mixed?
the props is get from parent，if it remians the old data. it can cause by parent. if you use redux，it may be caused by it. the reduce state is not clear.
I am creating a Vue component ("Polar") to layout divs in a circular pattern. It does so setting the inline styles.
Now, I am having a weird issue when I use the component. It happens only under a very specific set of circumstances:
I create multiple instances through v-for
The Polar component is a "functional" component
I pass the props as a referenced object (inline works fine!)
The propsObject contains a nested StylesObject
The custom Styles object gets merged as the first parameter of ObjectAssign()
What happens? All the instances in the v-for take on the value of the last item, like a closure was broken.
The code is a bit much to display here, so I have a codesandbox and github. The first test shows the issue: all items are displayed on top of each other. The second test demonstrates that I can pass the exact same propsObject, only inline, and it works. Reversing the arguments in Object.assign also makes it work, as does converting the component to a normal/non-functional one.
I suspect this is some sort of Vue bug (or at least undocumented behavior).
Quick answer:
Object.assign will change the first parameter (=target object). This caused my settingsObj to take on the other settings every time, until it had the settings of the last instance.
Easily resolved by changing
Object.assign(props.settingsObj, {setting: val, })
into
Object.assign({}, props.settingsObj, {setting: val, })
Sorry for blaming Vue, all my fault. Not exactly sure why this only happens with functional components, but it must be related to normal components being isolated in their own Vue instance.
I came across a bug in a React Native app that makes use of a native view component, and tracked it down to the order of execution of the property settings methods (e.g. #ReactProp methods on Android).
I found that I had to put the prop method that needed setting first as the last prop in the component's JSX declaration, which is a little counter-intuitive.
Is there a way to enforce this order?
Although this doesn't specifically answer the question, one way around this, when specific props are dependent on each other like this, is to bundle them in an object, which on Android would be passed to the native method via a ReadableMap. That way all the dependent data is in one place and can be handled in the correct order.
I'm discovering VueJS and I don't understand exactly the differences between updated and watchers.
Updated hook
It is a lifecycle hook. According to the official documentation, it is triggered whenever data changes. So whenever a prop or a data is updated (the value, not only the pointer), updated is called.
Watchers
In the documentation, watchers are compared to computed properties. But in which cases would it be best to use updated instead of watchers ?
It seems that in both cases, DOM is not updated when the callback is called (nextTick() is required if we want to manipulate the changes in the DOM). The only difference I see is that watchers are only triggered when one precise property (or data) is updated where updated is always called.
I can't figure out what are the pros of updating whenever a data changes (updating) if we can be more accurate (watchers).
Here are my thoughts.
Thanks :)
The lifecycle hooks around update respond to changes in the DOM. Watchers respond to changes in the data. DOM changes are generally in response to data changes, but they might not be data owned by the component in question. One example where updated could be used is noticing that slot content has updated.
I think a better analogous lifecycle hook to the watchers may be the beforeUpdate hook. The updated hook is called after the virtual DOM has re-rendered, whereas beforeUpdate is called before the virtual DOM has re-rendered. You can see a visual representation of this on the diagram you linked to.
in which cases would it be best to use updated instead of watchers ? (...) I can't figure out what are the pros of updating whenever a data changes (updated) if we can be more accurate (watch).
The documentation says that you should prefer a watcher or computed property instead of updated if it is possible to achieve your goal that way. My understanding is that the updated hook was included to allow users to watch for any changes to the virtual DOM (see below).
Here's the explanation from the Vue 2.0 release notes on watch vs. updated:
User watchers created via vm.$watch are now fired before the associated component re-renders. This gives the user a chance to further update other state before the component re-render, thus avoiding unnecessary updates. For example, you can watch a component prop and update the component's own data when the prop changes.
To do something with the DOM after component updates, just use the updated lifecycle hook.
It's easy to get a reference to navigator in the renderScene function, so calling navigator.push(newRoute) is simple when responding to an event that happens from within the JSX tree.
In my case, though, I want to call navigator.push(newRoute) from an external event. My app signs the user in with Google and fires an event when the sign-in is complete, and I want to navigate to a new route in that case.
How can I get a reference to the navigator? Is there any way to get it besides as a parameter to renderScene?
You can get the navigator through refs property: https://facebook.github.io/react/docs/more-about-refs.html. It's part of react (not specific to react native). It's not obvious from the react-native docs that there is a number of 'react' features that can be used in react-native, so i'd really advise to take a close look at react in general.
Note however, there is a good reason Facebook does not mention refs explicitly and loudly. Refs is really not a "go-to" way of accessing component. Your case might be of course different, but it's likely that the Google sign-up is not in-fact "external". It might actually be part of one of the components in the hierarchy tree above the navigator (in which case you can pass the state change down the tree).
Quoting from the summary of the "More about refs" document above:
If you have not programmed several apps with React, your first
inclination is usually going to be to try to use refs to "make things
happen" in your app. If this is the case, take a moment and think more
critically about where state should be owned in the component
hierarchy. Often, it becomes clear that the proper place to "own" that
state is at a higher level in the hierarchy. Placing the state there
often eliminates any desire to use refs to "make things happen" –
instead, the data flow will usually accomplish your goal.
Again - your case might be different and using refs might be perfectly justified, but if you are tempted (for example) to separate out all the Google-related stuff to separate object and if that makes the sign-up "external" - think twice. React really encourages putting all things related to a "component" logic in one place (the component) - even if that includes various technologies and external APIs.