DEV Community: immortallight

React fragment

immortallight — Wed, 08 Feb 2023 23:47:35 +0000

React:

React is an efficient Javascript library for building user interfaces (UI) in a web application, it gives room for you to make up a composite UI by combining minimal pieces of code called “components”. In React JSX gives room to re-write HTML elements directly within Javascript code.

However, returning more than one element in React components is a problem posing in using React unless all are wrapped up in a new parent node like <div> which creates extra nodes to the DOM which will expand the HTML DOM.

Let’s take a look at this:

 function Parent (){
  return (
  <p>Hello world!</p>
  <p>Hello React!</p>
  );
}

React components can only render one element, and if you have more than one element, then the common practice is to wrap them in a single root element, usually a <div> wrapper.
Like this:

 function Parent() {
  return (
    <div>
      <p>Hello</p>
      <p>How are you</p>
    </div>
  );
}

When DOM is large it consumes memory, causing the page to load slowly in the browser, in some cases debugging and tracing the origin of extra nodes becomes very uneasy, the user’s browser consumes additional power to process your website and many more disadvantages. So to avoid all of these overwhelming disadvantages React Fragment saved us from that hell.

React fragment:

React fragment is a feature in React introduced in React V16.2.0. This feature in React gives room to write more than one element in React components without adding an extra node to the DOM.

Recommendations:

It is recommended that you should be familiar with basic background knowledge about HTML and React before reading the article.

React components with div:

Before we see how to use React fragment let’s walk through some examples in React without using the React fragment.

For example, you have this React component:

function TableColumnData() {
  return (
    <div>
      <td> Hello fragment </td>
      <td> I am learning </td>
    </div>
  );
}

 function Table() {
  return (
    <table>
      <tr>
        <TableColumnData />
      </tr>
    </table>
  );
}

If we re-write in HTML we get this:

 <table>
  <tr>
    <div>
      <td> Hello fragment </td>
      <td> I am learning </td>
    </div>
  </tr>
</table>;

As we’ve wrapped up the <td> elements in <div>, we have introduced an element in the middle of <tr> and <td> elements and this breaks the parent-child relationship. For things to work as expected an element (the div for example) that can break the parent-child relationship should not be introduced and that’s the role of the React fragment.

How to Use React fragment:

Syntax

function Parent() {
  return (
    <React.Fragment>
      <Child1 />
      <Child2 />
    </React.Fragment>
  );
}

However, we can get rid of adding React to the angle bracket by importing Fragment from React.

import React, { Fragment } from 'react'

function Parent() {
  return (
    <Fragment>
      <Child1 />
      <Child2 />
    </Fragment>
  );
}

React Fragment shorthand:

React Fragment allows us to group a list of elements without wrapping them in a new node.
<> Is the shorthand tag for React fragment.

So we can take this for example:

Parent() {
  return (
     <>
        <Child1 />
        <Child2 />
     </>
  );
}

Providing solution extra DOM using React fragment:
In this section, we will be using React fragment to solve the problem we have in React without a <div>.

function TableColumnData() {
  return (
    <React.fragment>
      <td> Hello fragment </td>
      <td> I am learning </td>
    </React.fragment>
  );
}

function Table() {
  return (
    <table>
      <tr>
        <TableColumnData />
      </tr>
    </table>
  );
}

In this code snippet, we remove the <div> element from the previous example, we replace React fragment and it sorts out the break in the parent-child relationship, and things work as expected in the Table.

Conclusion

Throughout this tutorial, there was a brief introduction to React and JSX and the usual way of returning multiple elements in React components by wrapping them up in a <div>. We move further to React fragment and its practical application.

Thanks for reading this article. I hope this helps..🚀

Timing events in JavaScript

immortallight — Tue, 15 Nov 2022 14:26:54 +0000

JavaScript enables webpages to respond to user activity and enact a dynamic update, all without requiring a page reload to trigger change I'm the UI.

Timing events in JavaScript is the process of executing a JavaScript code within a specified time interval, which is also called periodic execution.

It is permitting a specific block of code to run after a given period, so code will not run until the set time has lapsed or expired.

It consists of two methods, namely the setInterval() method and the setTimeout() method.

These are asynchronous/await functions meaning that the block of code will wait on the permitted time event.

setTimeout

The setTimeOut() method sets a timer that executes a function once the time is expired.

Syntax

var TimeoutID = setTimeout(function(){
//codes
}, delay);
)

function - will be executed when timer expires.
delay - the time in milliseconds, the duration the timer should wait before executing function.

In this example there'll an alert of saying hello world after 3000 milliseconds.

Note: 1000 milliseconds is equal to 1 second.

      function myFunc() {
         alert("Hello World!");
      }

      var myTimeout = setTimeout(myFunc, 3000);

Output

If the setTimeOut() method is included in JavaScript. In that case, a function will not be executed until the time specified in the setTimeout() method has lapsed, and this method is useful because it permits a function that needs to be executed after a specified amount of time.

Canceling a timeout

The clearTimeout() cancels a timeout function specified in the setTimeout() function.
What you will have to do is specify the timeout you want to cancel or abort.
It will be canceled when you press the button.
Example below.

<body>
   <p id="msg"> Click this button before 5 seconds to stop the alert pop-up. </p>
   <button onclick="cancelTimeout()"> Cancel Timeout </button>

   <script>
      var myTimeout = setTimeout(function() {
         alert("Hello World!");
      }, 5000);

      function cancelTimeout() {
         clearTimeout(myTimeout);
         document.getElementById("msg").innerHTML = "<b>myTimeout</b> has been cancelled, the alert saying "hello world will not pop-up";
      }
   </script>
</body>

Output

setInterval()

setInterval() method repeatedly (a continuous call) calls a function.
Syntax

var intervalID = setInterval(function(){
//codes
}, delay);
)

function _ will be executed every delay milliseconds.
delay _ the time in milliseconds, the duration the timer should wait at every interval before executing function.

<body>
   <p id="demo">10</p>

   <script>
      var initial = 10;
      //our initial is 10, at intervals our initial will be increasing by 10
      var myInterval = setInterval(function() {
         // adds 10 to initial
         initial += 10;
         document.getElementById("demo").innerHTML ='initial is increasing every 1 sec ='+  " " +initial;
      }, 1000);
   </script>
</body>

Output

Output after 5 sec

Suppose the setInterval() method is included in JavaScript. In that case, a function will not be executed until the time specified in the setInterval() method is lapsed, and this method is useful in JavaScript, which requires the execution of a function again and again.

Stopping an interval

The clearInterval() cancels a interval function specified in the setInterval() function.
What you will have to do is specify when you want to cancel or abort.
It will be canceled when you press the button.
Example below.

<body>
   <p id="demo">10</p>
   <button onclick="stopInterval()"> Stop Interval </button>

   <script>
      var initial = 10;

      var myInterval = setInterval(function() {
         // adds 10 to initial
         initial += 10;
         document.getElementById("demo").innerHTML = initial;
      }, 1000);

      function stopInterval() {
         clearInterval(myInterval);
alert ("interval has been stopped!");
      }
   </script>
</body>

Output

Interval was stopped by clicking on the button after 4sec.

Summary

*Introduction to JavaScript timing events
*Running executing functions using the setTimeout method and setInterval() method.
*Cancelling or aborting functions using clearTimeout() and clearInterval().

In this article we were able to walkthrough the basic part of timing events, learn aboutsetTimeout() and setInterval().

Thanks for reading, I hope it was helpful.