Tag: React

useRef Hook in React

What is useRef? The useRef hook returns a mutable object that persists across renders. Unlike state variables, updating a useRef value does not cause a re-render of the component. This makes it ideal for storing values that need to persist between renders but don’t directly influence the UI. const ref = useRef(initialValue); ref: The object… Continue reading useRef Hook in React

useReducer vs useState in React

React provides several hooks to help manage state in functional components. Two of the most commonly used are useState and useReducer.  What is useState? The useState hook is the simplest way to manage state in a functional component. It allows you to add state to a component, and it returns an array containing the current… Continue reading useReducer vs useState in React

useState Hook in React

What is useState? In React, state refers to data that can change over time and affect how a component behaves or looks. The useState hook provides a way to introduce state variables into functional components. Before hooks were introduced, state management was only possible in class components, but with the advent of hooks, functional components… Continue reading useState Hook in React

Warning: Invalid DOM Property in React and NextJS

When developing applications with React, Next or any JavaScript Frameworks, one of the warnings you might encounter is: “Warning: Invalid DOM property. Did you mean …?” This warning indicates that a property you’ve assigned to a DOM element does not conform to the standard naming conventions used by React. Why Does This Happen? React uses… Continue reading Warning: Invalid DOM Property in React and NextJS

How to Create a Multi-Select Input Field with React-Select

Introduction React-Select is a flexible and highly customizable React component for creating select inputs. It provides a wide range of features, including multi-select functionality, making it an ideal choice for implementing complex selection interfaces in your React applications. Installation npm install react-select Creating a Multi-Select Input Field Import React-Select into your component file: import Select… Continue reading How to Create a Multi-Select Input Field with React-Select

Map vs FlatMap: Next.js

Map: Definition: The map method is used to iterate over an array and execute a provided function on each element of the array, creating a new array with the results of calling the function for each element. Practical Use: Transforming data: map is commonly used to transform arrays of data into a new format. Rendering… Continue reading Map vs FlatMap: Next.js

Time Zone Conversion with Moment.js in Next.js

Installation npm install moment Time Zone Conversion // Original date in GMT const originalDate = moment.utc(‘2024-04-22 12:00:00’); // Convert to a different time zone (e.g., New York) const convertedDate = originalDate.tz(‘America/New_York’); console.log(convertedDate.format(‘YYYY-MM-DD HH:mm:ss’)); // Output: 2024-04-22 08:00:00 Input Format When specifying time zones in Moment.js, it’s essential to adhere to the city format recommended by… Continue reading Time Zone Conversion with Moment.js in Next.js

Set up build folder in server files in React-Node Js.

You can use cross-env, a package that sets environment variables across platforms. First, install cross-env as a dev dependency: npm install cross-env –save-dev Then, modify your build script to use cross-env to set the BUILD_PATH: “scripts”: {   “dev”: “react-scripts start”,   “build”: “cross-env BUILD_PATH=../server/public react-scripts build”,   “test”: “react-scripts test”,   “eject”: “react-scripts eject”  }, Now, when you… Continue reading Set up build folder in server files in React-Node Js.

Idle timer in React

Inside your React project directory, install IdleTimer npm i react-idle-timer In the below example when the user id idle for 10 sec it will fall to idle state, in other times it will be in active state import { useEffect, useState } from ‘react’ import { useIdleTimer } from ‘react-idle-timer’ import ‘./styles.css’ export default function… Continue reading Idle timer in React