 So, hey all, I am Jayanth and I work at Shuttle and today I'm going to talk about a few different approaches to connect your components to the Redux state. Primarily the components are going to be in this manner. There's going to be a parent and it's going to have multiple children inside it, basically to render a list, right? So, one note that this is not going to have a lot of technical details in the interest of time. So, I'm going to show you how the state looks like initially. Your state is going to have this bit, items, it's an array of objects and say it's got a lot of items, it's a big array, so it has like 5000 items or something. In the first approach, you have your state. The parent is connected to the state directly, so the items, the entire array is passed directly as it is and then inside the parent you have something like items.map and the children are rendered, the children are rendered inside it normally, like how we normally do that. The second approach, which is probably a bit more uncommon, so in this one, the state is connected to the parent but the entire items array is not passed. Only the items.length is passed, so the parent only gets the number. Now inside your parent, you treat basically items.length number of times and when each child is rendered, each child gets its own index. So, the children are not getting objects this time, which they are in the state, they are only getting a number. Now, for each child, that is also connected to the state. You see that second bit of state there, it's basically the same, but it's a card design. So, each child is basically connected to the state as well, so they are getting the entire items array, but since map state to props, second argument also takes own props, so you have access to the length prop, sorry, index prop that they get. That means you can read the item at the given index that you actually want, so every child inside the parent is only getting the item that they are interested in. So, this is the second approach. Now, the second one is obviously a bit more complicated to think about, so why would you go with that? What are the performance differences? The first approach for the very specific example that I have picked with 5000 items on my machine took 1.7 seconds to render each time on each update. The second approach took 5.5 milliseconds on average. This is after multiple tests at the same time with external constraints remaining the same. The state is still the same as shown. Now, you might wonder, like, what about react.memo? Like, that's something, right? You can wrap your component in memo and it supposedly should help. So, I tried that too at a later time and this is what we get there. So, the approach 2 is the complicated one that I talked about, which in this case at a later run took about 2.6 milliseconds on average. Perhaps I was running fewer external processes. react.memo still took about 25.2 milliseconds. That's still about 10 times more on average. So, yeah, that's basically it. If you're interested in, like, how react actually handles DOM mutations and all of that, because you must know that react optimizes away DOM mutations in these cases. That is explained in the link that is there, bit.ly-jv-redux-perf. If you have any questions or if you think that the test could use improvements and all, you can reach out to me on Twitter or GitHub. That is all. Thank you very much.