Essential concepts to master React

Once upon a time, users had to refresh pages to see new posts and notifications on social media. The same for receiving any kind of updates. No one really thought about it, but Facebook realized there was a room for improvement. They launched React and web development was never the same again. Thanks to React, UX has dramatically improved and users set higher expectations every year.
These days, React is the most popular library for building interactive user interfaces. In this article, we will look at most important concepts in React.

Virtual DOM

React maintains a shadow copy of the DOM. Data displayed on the page is stored in the state and props. Whenever any data changes, React calls the render() method to update the page.
Virtual DOM is very efficient, so it can afford to update the entire component tree. Then React compares virtual DOM with the real DOM and settles differences. This ensures efficiency of the web application. It also ensures that web applications always display the most recent updates.

State, props, single-way data flow

In React, state is the object that stores current ‘status’ of the component. For example, if a new post needs to be displayed, the id of the new post would be added to the state. As you know, changes in the state (and props) also triggers update of the page.

State is often used for dynamic functionalities. For example, dynamic rendering of certain elements or components. State values are also used to conditionally style elements using inline styles or className values. User inputs are usually stored in the state. Such cases are called controlled inputs. This guide explores how to access values of user inputs in React.

React recommends to store state data in the component at the top of the tree. This is called a ‘single source of truth’. Every component in a web application should receive data from the main parent component.

Finally, this brings us to props. This is how parent component passes data down to children components. In JSX, you can define props as simple custom attributes on React elements and custom components. Props can be passed from parent components to children, not the other way round. This is called single-way data flow.

JSX

React comes with a custom templating language JSX. It looks like HTML, but JSX is actually JavaScript. This template language allows you to build components, which are essentially small parts of a website. JSX defines what the component should look like and what elements it contains.

Other front-end frameworks like Angular require a separation of logic and presentation. JSX combines presentation and logic. JavaScript expressions can be easily embedded. To do this, you need to wrap JavaScript expressions in curly braces.

You can embed JavaScript expression as prop or attribute values. You can also embed them as contents of JSX elements. React developers often use the map() method to create React elements and components by looping over objects in the array in React.

In JSX, you can conditionally display error messages, or even hide entire components depending on state values. You can’t use getElementById() method, but you can use refs to the same effect.

Rendering

All React components have logic and JSX. The render() function has a return statement which returns component template written in JSX. The code looks a lot like HTML, but it is actually JavaScript. JSX template defines what the component needs to look like and its custom functionality. So it’s very important.

The render() method is responsible for updating the screen when needed. Most of the time, dynamic appearance of elements depends on state and/or prop values. Whenever state and prop values change, React calls the render() method. This is the basic use for this important method. In this article, we’ll take a closer look at the render() method, when it is called, and other use cases.

You can use a library like react-router to render components for a specific URL. You can also get parameters from the query to implement dynamic functionalities based on current URL.

Virtual DOM

This is one of the most important concepts in React. Virtual DOM is React’s internal image of what the page should look like. Whenever state and prop values change, React updates the mirror image (virtual DOM). Then React internally synchronizes this image with actual DOM and shows updates on the page. All of this happens very seamlessly and keeps React efficient. This allows us to implement great UX features like clearing form after it is submitted. More about that in this guide.

The render() method updates virtual DOM image of the component. The default behavior is that React updates virtual DOM for the component itself, as well as its children components. This would be inefficient for real DOM. However, virtual DOM is just a shadow image and much more lightweight. For this reason, React is fairly efficient and changes the DOM almost immediately.

An important distinction is that the render() function affects only virtual DOM. It does not render the actual HTML page. React automatically handles differences between virtual DOM and real DOM.

What does rendering mean?

Rendering refers to the action of displaying web apps on the screen. It is also commonly referred to as updating the screen. There’s even a componentDidUpdate() lifecycle method in React. You can use it to run a side-effect every time the component re-renders. In functional components, you use the useEffect() to do the same.

componentDidMount() lifecycle method refers to the time when the component is first rendered. Once it is rendered, then componentDidUpdate() taps into updates.

Class components vs function components

The render() method is an essential part of both types of components in React. Class components have a separate render() method. In addition to normal class properties, the render() method is explicitly defined. It is usually positioned at the end of class components.

In class components, render() does not accept any parameters. Its only purpose is to return a JSX code that represents component’s appearance and functionality.

Functional components are a little different. They only have a return statement. However, changes to state or props still triggers the render method. In a way, functional components are render() methods themselves. They are run whenever state or props changes, and update virtual DOM.

Functional components do accept one argument – the props object, which is used to pass down data from parent components to their children.

There’s practically no difference between render() in class components and functional components. Both work the same way and follow the principles outlined above.