Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
ReactJS Articles
Page 2 of 11
How to Fix React useEffect running twice in React 18?
In this article, we will cover why React 18's useEffect runs twice and how to handle this. If you recently switched your React application to version 18, you might have noticed that useEffect runs twice during component mounting. React 18 introduces a new development-only check called Strict Mode. This new check will automatically unmount and remount every component. Let's dive deeper into why this happens. Why useEffect runs twice? In React 18, when you are in development mode, your application runs in StrictMode by default. In StrictMode, React mounts, unmounts, and remounts components. It helps developers identify bugs and unexpected ...
Read MoreDifference between state and props in React
In this article, we will learn about the differences between state and prop. props stands for properties and provides the way to pass the data from one component to another while state is like a variable to store data. Props are immutable because it can't be changed while State is mutable because we can change them easily. Understanding the concept of state and prop for building reusable and maintainable applications is necessary. ReactJS Props Props are the objects used to pass the data from one component to another. It is the abbreviation for Properties. Prop is the read-only ...
Read MoreHow to Show or Hide Element in React?
In this article, we are going to cover the implementation of dynamically showing or hiding elements in React. To understand this concept, you must be familiar with hooks in React. By leveraging hooks like useState, you can toggle and update the state to effectively control the visibility of an element. Approaches to Show or Hide Elements in React Using && Operator Using return null Using && Operator We have to change the state when a button is clicked, then it will determine the visibility of the element. With ...
Read MoreDifference Between React Native and React
React is a well-known JavaScript library mostly used to build dynamic and interactive user interface applications for the web. It is a creation of Facebook, which lets developers create reusable UI components and also provides a virtual DOM on which rendering is to be done. React Native is a new concept that applies the logic of React to developing mobile applications. That means developers can write mobile apps for both iOS and Android operating systems. Using React Native, one would get identical compiling with a single codebase. Using native components instead of elements from the web gives a real ...
Read MoreDifference between Virtual DOM and Real DOM
Virtual DOM and Real DOM are important terms in web development. They both influence the rendering and updating of user interfaces. Virtual DOM is a transparent overlay that maximizes updates, whereas Real DOM is the underlying structure that the browser manipulates. To maintain optimal performance, web development frequently calls for effective ways to handle user interface (UI) modifications. Given their frequent changes and performance issues, traditional Document Object Models (DOMs) have been replaced by Virtual DOMs in contemporary frameworks. It is very important to understand the differences between Virtual DOM and Real DOM and how current frameworks achieve greater ...
Read MoreHow to clear complete cache data in ReactJS?
Caching is a technique used to store reusable resources in the user's browser. Caches are of different types, for example, Local Storage Cache, Session Storage Cache, and Service Worker Cache, each of these has a different approach to clearing completely from browser. In this article, we will explain how to clear all caches in a React app. What is Cache? Caches are temporarily stored resources on a web page such as variables, user preferences, images, style sheets, scripts, etc. These are used to reduce server load and speed up page load times by reusing previously fetched resources. Following ...
Read MoreWhat is prop drilling and how to avoid it?
Prop Drilling is a common mistake beginners make while building React apps. It can cause reduced code readability and even performance issues for the app. In this article, I will explain what are props, prop drilling, and how to avoid prop drilling using context APIs. Table of Content What are Props? Prop Drilling Why to Avoid Prop Drilling? Fix Prop Drilling With Context API Prerequisites Good knowledge of React, useState Hook, and useContext Hook. ...
Read MoreHow to parse JSON Data into React Table Component?
JSON files are used in APIs to transfer data from server to client in the form array. This transferred data needs to be displayed in the user interface, such as in tables or any other components. In this article, we will demonstrate how to display JSON data using a React Table. Prerequisites To display a JSON file in React.js, we need to have a basic understanding of the React.js library. Basic knowledge of React, useState Hook, and useEffect Hook. Ensure Node.js and React are installed on your system. ...
Read MoreHow to create an unique id in ReactJS?
Unique IDs are used to differentiate multiple elements from each other, maintain the internal state of components, or create a key for user data. In this article, we will explain all the approaches to creating unique IDs for a set of elements in React JS. Approaches to Create Unique ID in React JS Here is the list of approaches for creating unique IDs in React JS, which we will be discussing in this article with stepwise explanations and complete example codes. Using uuid Library Using Timestamps ...
Read MoreCreate Editable Table with add delete and search filter using ReactJS
Editable tables are useful for storing and modifying data directly within the user interface. In this article, we will show a step-by-step procedure to create a dynamic table in ReactJS with features like adding, updating, deleting, and search filter on entries. Prerequisites To create an editable table using React.js, we need to have a basic understanding of front-end development and the React.js library. Basic knowledge of React, useState Hook, and functional components. Ensure Node.js and React are installed on your system. Understanding of basic HTML table ...
Read More