Understand React Component Reuse and Create a Reusable Component in React Native

Instructor: [00:00] React will reuse components and give you access to the previous data, as well as the current value. With this ability, we can actually animate from the previous value to the new value, without much effort.

[00:13] Let's convert our current number range into a reusable component. We'll set up a component here, that we'll call class, tick, and we'll extend component. We'll just need a render function in here.

[00:31] For this render function, we'll copy the contents of a single range. This will wrap all of our ranges, and this will then be the component. Which will be our transformStyle that will rotate, as well as the numbers that are inside of it.

[00:48] Copy this, and we'll return that information. Now we remove this all from the render function so we can see that nothing is rendering over here. But now we need to pass in the information as props.

[01:05] We will render, inside of our container here, a single tick. Rather than doing this transform here, we'll pass down a value. We'll say value = 0We'll additionally pass down the height, and that way, we can derive everything that we need inside of the tick component.

[01:32] We'll tick this transformStyle and place it into our tick component. This getPosition, this was the value that we were looking up. Now, we'll look up this.props.value, and we no longer have access to the height as a variable.

[01:52] We need to access it on props, so we'll say this.props.height. Now we have our 0back, and our component is encapsulated. Now that we have a reusable component, we can render as many of these as we would like.

[02:06] The first thing we need to do is change how our wrapping container works. The default in React Native is flexDirection column. However, we want our numbers to lay out in a row. Let's replace this hidden class with a thing called row, then we'll additionally add flexDirection row to that class.

[02:28] Now when we render multiples of these, say 1 changes to 9, we have three that are rendering. You'll see some oddities here where this is closer to the 0than the 9. We can combat this with adding textAlign center.

[02:52] This is happening because we need to wrap everything in a view, and adjust this, rather than having numbers next to each other. This is something that we just have to live with.

[03:04] To show off that these are actually getting reused, we're going to come up to our tick and add a componentDidUpdate lifecycle method. When this component is updated, and the instance is reused, this function will run.

[03:17] We'll then just console log the previous props.value and the current value, which will be this.props.value. We need to actually write some code so that this will run and this component will be reused.

[03:42] In order to do that, we'll need some state. On our state, we'll set up a value1 of 0value2 of 1 and value3 of 9. Just to match what we currently have. We can then pass those into our ticks.

[03:59] We'll say this.state.value1, this.state.value2 and this.state.value3. And we are back to where we're at. In the componentDidMount lifecycle method of our app, we'll simply set up a setInterval for one second. This will be called every one second, and we'll just do a setState.

[04:28] We'll change our value1 to getRandom, from 0to 9. We'll do our value2 of the same, and our value3, the same as well. Now when I save this, you can see that our numbers will start to change.

[04:51] To prove that they are actually updating correctly, we can take a look at Expo and see that we are executing the lifecycle methods as we expected to. This will allow us to execute animations inside of our componentDidUpdate, whenever the value changes.