React Core Concepts : State, Props, Virtual DOM, Events and Refs

Now that we're done dealing with JSX and what role does it serves in React, it’s now the time to deal with the core concepts of React. So, in this article, we’re going to discuss the following core concepts

• State
• Props
• Virtual DOM
• DOM vs. Virtual DOM
• Events
• Refs

At the end of the article, you should be able to grasp the basic concepts that allows you to understand how React works.

State

State in React is an object that determines how a component should be rendered or displayed. It is what makes your component dynamic as it renders/re-renders when you make changes to a state. React does the re-rendering under the hood when you’ve changed the state using setState(). State can be said to be very similar to props, but it’s constrained within a component. Each component has their own state that determines how it should look like and put our logic into that state.

Take note that a component “should” be a class rather than a functional component as we have two types of component we can use to render react components. We will tackle what’s the difference between the two later on, but for now, let’s focus on state. Let’s take a look at the use-case on how we use the state

Code snippet

Initial state

After setState

You can see that we used state to hold and change the value of an object, and finally rendering it in our component. All of this is possible because of React’s algorithm under the hood.

Props

Props in React are properties that is present within a component. Just like how a class in OOP has properties representing its data structure, the same goes with React’s component. Just imagine a car’s property within your component. How would you make use of properties in React’s component? We do it like so:

We set the properties when we’re about to use a component to render in the page.

Then, we are to access those properties inside a component by calling this.props.

Virtual DOM

Now, let’s talk about Virtual DOM and how it shapes the react ecosystem so that it’s better, and well-optimised when rendering it in the webpage. Everything you see in the webpage is rendered in HTML format. And within that HTML, we have the so-called DOM or Document Object Model that allows us to display the buttons, align forms where they should be positioned, divide layouts, and display what a user needs to see. Virtual DOM is simply a stripped-down version of the real DOM to make the rendering more performant. Additionally, it’s using what we called the “diffing algorithm” to make the performance more impactful.

DOM vs. Virtual DOM

Virtual DOM has some shared similarities with the DOM. Except that Virtual DOM is lighter and faster to render than the real one. Virtual DOM is best paired with React because of diffing algorithm and it isn’t drawn onscreen compared to the real DOM.

Events

React does a good job of handling events that handles user interactions inside the web app. It’s one of my favourites and one of the reasons why I’m using react in my recent projects. Fortunately, how react handles events are pretty similar as how you would do it in HTML DOM, so pretty much it will all be too familiar for you when you delve on it.

Code snippet

You’ll notice that this is pretty similar to how you add an event handler to HTML DOM. I like how it has retained it and it equally feels like I’m using the plain old javascript and HTML DOM.

Refs

If you need more power and flexibility in accessing the particular DOM (such as getting the DOM’s position or getting its coordinates), then React provides an escape hatch for you to use and this is through the use of “Refs”. Refs are the best use when you wanted to get all the properties of the specific DOM within the component you’re trying to access. One use case for this is when you wanted to apply animations and you want to use all the properties the DOM has to fully implement the animation you’re trying to achieve. Here’s the sample code snippet for you to play around if you wanted to use it (according to official docs)

Summary

So far we have discussed the react core concepts and how are we going to use it in order for us to grasp the react ecosystem. I hope you guys learned a lot in our article for today.