React JS Fundamentals Revisited with Advanced Topics

VirtualDOM, Components, JSX, Props, States, Hooks, Side Effects, PropTypes, Data and Event Flow, Conditional rendering, React App Optimization

React JS is the most popular JavaScript Library for front-end development. It makes it easy to build Web UIs with less complexity, bypassing the direct manipulation of the DOM by the developers on their own. React’s speedy DOM manipulation (due to virtual DOM concept) and outcomes-based UI language (i.e. When actions happen to the state of a component, React takes care of updating the UIs in the DOM based on that) makes it so popular among the developers. Making cross platform apps for Web, Android and iOS is also made easy by React. Lets know some core concepts in brief that make a React app so special.

While making an app with React, developers don’t have to worry about manipulating the browser DOM. What they have to do is only update the states (we will be learning it later in this article) of the app and tell React what to do and rest goes to React. React does the heavy lifting of manipulating the DOM, but in the simplest way. It manages a virtual DOM tree of the entire app in the memory.

When any changes are to be made to the real DOM by any event, it generates a new virtual representation of the updated tree. Now React has 2 versions of the tree in memory! React does not discard what has already been rendered in the DOM tree in the browser. Instead, it will compare the 2 virtual versions of the tree that it has in memory, compute the differences between them, figure out what sub-trees in the main tree need to be updated, and only update these sub-trees in the real DOM in the browser. And, this concept makes React very efficient to work with a browser’s DOM tree.

Components are the building blocks of every React app. We define small components and then put them together to form bigger ones. All components small or big are reusable, even across different projects. They are nothing but some reusable functions with some input parameter providing some output, smaller ones are tied together to build the bigger ones. In a react component, input is the set of ‘props’ and output is the description of a UI. Basic structure of a component is just a plain JS function. A component can have one or more states which store data that may change over life cycle of the component and on which the output of the component depends.

In a React app, we do not create a HTML element by our own either directly with HTML or with JavaScript, rather we tell React to do it with JSX (JavaScript Extension). Instead of writing React components using the React.createElement syntax, we use a HTML like JSX syntax and then use a “transpiler” (e.g. Babel or TypeScript) to translate it into React.createElement calls. So a React component is a JavaScript function that returns a React element (usually with JSX). When JSX is used, the <Tag></Tag> syntax becomes a call to React.createElement("tag"). The first letter must be a capital one and it is a requirement since we will be dealing with a mix of HTML elements and React elements. Browsers don’t have to deal with JSX at all and React does not have to deal with it either! Only the compiler does. We send the raw html and css to the browser.

The way HTML elements can be assigned attributes like id or title, a React element can also receive a list of attributes when it gets rendered. The Button element above received a label attribute. In React, the list of attributes received by a React element is known as props. A React function component receives this list as its first argument. The list is passed as an object with keys representing the attributes names and values representing the values assigned to them.

The state contains data specific to a component that may change over time. The state is user-defined, and it should be a plain JavaScript object. The states should not be modified directly, rather with special function. States may be updated asynchronously, you should not rely on their values for calculating the next state. This is why state is often called local or encapsulated. It is not accessible to any component other than the one that owns and sets it. Define a new variable introduces a new state and changing the value of that variable mutates that state. A component may choose to pass its state down as props to its child components. Simple state implementation with state hook is given below:

Hooks are new feature in React 16.8 release. A Hook is a special function that lets you “hook into” React features. For example, useState is a Hook that lets you add React state to function components. All hooks functions begin with the word “use” and they can only be used in function components. Though, hooks are JavaScript functions, you need to follow two rules when using them.

See the above example in States section for Hooks implementation.

Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects. Whether or not you’re used to calling these operations “side effects” (or just “effects”), you’ve likely performed them in your components before. We will explain it with hook.

What does useEffect hook do? By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates. It takes a function and an array of dependencies. Placing useEffect inside the component lets us access the state variable (or any props) right from the effect. We don’t need a special API to read it — it’s already in the function scope. Hooks embrace JavaScript closures avoiding newReact-specific APIs. By default, useEffect runs both after the first render and after every update. React guarantees the DOM has been updated by the time it runs the effects.

To add PropTypes to a functional component, we need to declare the component in a separate function before exporting as shown above.

Parent Component:

Child Component:

Parent Component:

Child Component:

In the above example, state variable and the state function are passed to the child component as props, where the props are used to change the data in the parent state on an event. The state function is called as event handler in the child component and passes some data up to the parent.

Though, React itself is much faster using several clever DOM manipulation techniques, we may still take some extra care for our applications, in several ways that can speed up the React application further.

To make the production server response faster we must use the production build of the application. This production build can be created in several ways e.g.

‘brunch build -p’ in Brunch

in Browserify,

in Rollup,

in Webpack.

If the application renders long lists of data (hundreds or thousands of rows), using “windowing” technique is recommended. This technique only renders a small subset of your rows at any given time, and can dramatically reduce the time it takes to re-render the components as well as the number of DOM nodes created.

Reconciliation is the process of building a new virtual DOM on any event and comparing it with the existing virtual DOM to get the diff and change the browser DOM. Even though React only updates the changed DOM nodes, re-rendering still takes some time. In many cases it’s not a problem, but if the slowdown is noticeable, we can speed all of this up. If we know that in some situations our component doesn’t need to update, we can skip the whole rendering process.

Related posts:

These are a few of the words I would use to describe how I felt from Sunday night (around 4am Monday) til roughly 6–6:30pm Thursday night. And just to point out that my fiance and I are currently…

First of all I would like to say thank you to medium because I’m really enjoying writing articles on this platform. The very first thing that I do in the morning after I wake up is make my tea/coffee…

Python is one of the richest programming languages! Easy to use, whether you are new to programming or an experienced developer, it’s really so easy to learn and use python. Invented in the…