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.
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.
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.
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.
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.
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.
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.
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.