Post
Ask Question

How ReactJS Is Different From Other Languages?

Introduction

React.js is one of the most widely used programming languages today. React.js appears complex at first, and developers are unable to proceed. I have written this article to introduce beginners to some of the key features. Following is a list of features that are unique and appear to be complicated at first.

  1. Variable changes will not reflect as you expect
  2. Async update
  3. If statement is not allowed in render
  4. Difference between () and {}

Variable changes will not reflect as you expect

The first weird thing you'll notice is variables will not update as expected. For example,

import "./styles.css";

export default function App() {
  let count = 1;

  const IncreaseCount = () => {
    count = count + 1;
  };
  return (
    <div className="App">
      <h2>Count: {count}</h2>
      <button onClick={IncreaseCount}>Increase</button>
    </div>
  );
}

In this example, we are only increasing the count variable when the user clicks on the Increase button. As a developer, we think this is a normal thing that should happen. You can visit the below link for a live demo.

https://codesandbox.io/s/admiring-monad-5g9qr?file=/src/App.js:0-275

As you have noticed, the count variable's value is not increased on button click. To understand why variable value is not increased we need to understand the DOM concept.

DOM

DOM stands for Document Object Model. When we create any HTML page we have many tags, for example, body, p, div, etc. All these tags are store under DOM. Let's consider, we have the following HTML page,

<html>
    <body>
        <div>
            <p>Hello</p>
        </div>
        <div>
            <p>welcome</p>
        </div>
    </body>
</html>

In this scenario, DOM will create a tree of elements(tags) as shown in the following chart,

If we change the content of the p tag from Hello to Hello world, the entire tree of an element is re-created. In a large application, this can cost a lot because we will have many tags. On every change, entire DOM will be re-created. To solve this problem, react virtual DOM came into the picture.

Virtual DOM

When the first time a page is created, virtual DOM will create a copy of real DOM. If we make any change in state or props, another copy of the virtual DOM will be created.

So except the first time, we will have two copies of virtual DOM,

  1. Updated virtual DOM
  2. Previous virtual DOM

React will use a diff algorithm to identify a change in the DOM object (element or tag). The only changed object is updated on the real DOM.

With the help of virtual DOM, we are getting rid of re-creating the entire DOM on every state or props change. You might think that we will have an extra cost of creating a virtual DOM but the virtual DOM uses Javascript, which is lightweight and very fast.

React needs some indication on when it's supposed to re-create and compare DOM with old DOM (also known as re-render). React will re-render component when state or props of component is updated. In our example, we are updating variable value which is not state or props.

The following counter program will work as expected as we will use react state.

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [count, setCouner] = useState(1);

  const IncreaseCount = () => {
    setCouner((countValue) => countValue + 1);
    console.log(count, "count");
  };
  return (
    <div className="App">
      <h2>Count: {count}</h2>
      <button onClick={IncreaseCount}>Increase</button>
    </div>
  );
}

https://codesandbox.io/s/dry-field-w098l?file=/src/App.js

2. Async update

The second annoying thing is that console.log will not work as expected. Open a console and observe results.

https://codesandbox.io/s/dry-field-w098l?file=/src/App.js

As you marked, the console is printing the previous value. Now let's understand why this happens.

As I explained, react depends on state and props for re-render. In real applications, different activities might be updating 10 different states at the same time. Now if react will recreate and compare DOM 10 times it will slow down the application. To solve this issue react update state asynchronously. So when 10 different states are updated react will create a bunch of 10 changes and update DOM only once. Here 10 state changes are for example. These 10 changes might not happen at the same time but might happen at fractionally different times. The point is that react.js will change state in a bunch to reduce the number of re-render.

3. If the statement is not allowed in the render method

When I started working in react.js it was very weird for me that if statement is not allowed in render method. In normal programming, we use it a lot. For example following code will not work.

export default function App() {
  const data=1;
  return (
    if(data===1){
        <h1>Hello form if block</h1>
    }else{
        <h1>Hello form else block</h1>
    }
  );
}

If you want conditional rendering in react.js you'll need to depend on the ternary operator. So you'll need to change code as,

export default function App() {
  const data=1;
  return (
    data===1?<h1>Hello form if block</h1>
    :<h1>Hello form else block</h1>
  );
}

4. Difference between () and {}

When you start working in react.js you'll not understand why the following code is not working.

import "./styles.css";

export default function App() {
  const data=1;
  return (
    <>
      <h1>Hello</h1>
      (data===1?<h1>data is 1</h1>:<h1>data is not 1</h1>)
    </>
  );
}

https://codesandbox.io/s/goofy-cartwright-ly20w?file=/src/App.js:0-185

If you'll visit the sandbox link you'll notice that.

(data===1?<h1>data is 1</h1>:<h1>data is not 1</h1>)

this line is returned as any Html statement and ternary operation is not performed. In react.js we use () to return Html. In this example, we are trying to return HTML from HTML as we are using () twice. Correct code using {}.

import "./styles.css";

export default function App() {
  const data=1;
  return (
    <>
      <h1>Hello</h1>
      {data===1?<h1>data is 1</h1>:<h1>data is not 1</h1>}
    </>
  );
}

In map difference of {} and ()

Consider following map statement,

const allData = datas.map((data) => (
   <Data key={data.id} name={Data.firstName+" "+Data.lastName} />
));
const allData = datas.map((data) => {
   const name=data.firstName+" "+data.lastName
   return <Data key={data.id} name={name} />
});

Both map statements are doing the same thing, calling the Data component. In the first example, we used (), which indicates the return statement. In the second component, we have used {}. So we can perform code manipulation and after that, we can return code.

If you have any doubt let me know in the comment section. Thank you. 


Similar Articles