React: Efficiently Rendering Lists

React JS, which was created by Facebook, is today's most popular JavaScript Library for building User Interfaces. We can use React to build sleek, fast Single Page Applications or websites. In the article I'm going to talk about the keys to efficiently rendering lists in React, and show how rendering list's correctly is the main thing that helps React maintain super fast performance.

Updating the DOM is usually one of the main bottlenecks when it comes to web performance, especially when using a bunch of CSS effects and animations. If you have large amounts of data that need to be rendered to the page, performance can take a pretty big hit trying to keep up with everything that needs to be rendered. Normally when something on a page get's edited, the entire page will update, rendering things that haven't even moved or been changed. One of React's main focuses was aimed to fix this problem, and it all starts with the React Virtual DOM; a DOM kept in memory. React essentially renders everything to its virtual DOM, compares that to the real DOM, and then updates the real DOM by only rendering the things that have changed.

Rendering to the virtual DOM is very easy. You start by calling the render method off of the ReactDOM object, which takes two parameters. The first argument you give function is the element that you want to render to the page, and the second is where you want it to be rendered.

const name = 'Ryan Moragas';

const nameElement = <h1>Hello, {name}</h1>;

ReactDOM.render(nameElement, document.getElementById('title');

Above you can see the basic syntax for writing in React JS. You can use JSX, which can be thought of as a kind of javaScript/HTML hybrid that is extremely easy to learn. You can create HTML layouts directly in you javaScript code, and anything that needs to be evaluated in javascript goes inside of curly brackets. Pretty simple, right? Dynamically rendering lists in react is also extremely simple.

const SimpleList = () => (
  <ul>
    {[3, 2, 1].map(num => <li key={index}>{num}</li>;)}
  </ul>
);

In the snippet above I made an array that we'll use for our list to render. We wrap our list in the unordered list tags, and then in curly brackets we use the native map method to loop through the list and create a JSX element for each value. In this example you can see that we are giving each list item a key of the num itself, and this is extremely important when rendering lists in React. The framework uses the key value given to each element to try and determine wether or not the item needs to be re-rendered.

Let's imagine that we wrote some code that rendered the list we wrote above, and added a click button that dynamically added a number each time the button was clicked. For the sake of this example , assume that the code written had the key of each item set to the item's index.

In the example above, the click button adds to the array and the value is dynamically rendered to the page. The problem with this is that each time an item is added to the array, its index changes, and react renders everything to the page every time a new number is added. Above is an example of what not to do when assigning keys to things being rendered. You should always try to use a unique ID key that no other item on your page will have. This helps ridding your application of wasted renders, and allows React to render your lists items as efficiently as possible.

In the refactored code above, we set the keys to the numbers themselves, assuring that no keys will be changed once originally created. You can see that this fixed our rendering problem, and now the only thing being rendered to the app is the newly added item. In conclusion, you want to write all javascript in curly brackets, use native javascript methods to dynamically render items and save time, and always use unique keys for items being rendered.