# React List Optimizations

This repository explores rendering optimizations when mapping over data to create a list. It utilizes React hooks to ensure only the list items that actually changed are re-rendered.

The effect of the optimization can be seen by tracking the highlighted updates using React Dev Tools.

**Local Setup**

1. Clone this repository with `git clone https://github.com/tsnolan23/react-list-optimization.git`
1. Change into the directory with `cd react-list-optimization`
1. Install dependencies with `yarn install`
1. Start it up with `yarn start`

<br/>

<img width="978" alt="Screen Shot 2019-05-22 at 8 52 54 PM" src="https://user-images.githubusercontent.com/12575994/58220334-193f4a80-7cd4-11e9-8758-a385bd43f218.png">