If you’ve spent any time with React, you know the "

, the linter screams at you to add a variable to the dependencies, you add it, and suddenly your effect is running way too often. You’re caught between 

In React 19.2, we finally have a built-in escape hatch: 

The Core Conflict: Reactive vs. Non-Reactive

Inside a standard useEffect, every variable is treated as 

. If it changes, the effect synchronizes. But in the real world, logic is often a mix:

 what the current Theme is, but I don't want to restart everything just because the Theme changed."

allows you to wrap logic in a special function that always sees the latest state and props but 

Think of it like a "teleportation" hook. It takes a piece of code, moves it outside the reactive lifecycle, but keeps it connected to the latest data.

Because useEffectEvent handles "non-reactive" logic, React places strict guardrails on it to prevent bugs:

 an actual useEffect. You can't call it in your component body or in an onClick.

 The function identity never changes. You don't need to (and shouldn't) put it in dependency arrays.

 Since it's for side effects, you can't use it to calculate values used directly in your JSX.

You should use useEffectEvent whenever you find yourself fighting the dependency array. If you are adding a variable to useEffect just to satisfy the linter—but you don't actually want the effect to restart when that variable changes—

that is your signal to use useEffectEvent.

It’s the final piece of the puzzle that makes useEffect feel like a tool you control, rather than a tool that controls you.

Another React 19 feature you should know is the new Activity Component.

useEffectEvent is a specialized React hook used to extract non-reactive logic out of an Effect. Check out the blog to understand and know more.

useEffectEvent Hook - React's new hook

It is a new primitive designed to solve a long-standing trade-off in web development: 

Traditional Method: Using `{isVisible && <Component />}` unmounts the component, causing a total loss of local state, scroll position, and input values.

 Using `display: none` keeps the state but keeps the component "alive," meaning it continues to run expensive effects, timers, and background updates.

 It provides a middle ground. When you set its mode to hidden, React keeps the component's state and DOM nodes in memory but 

States are preserved and local useState are kept.

It stays in the DOM with display: none applied.

useEffect cleanup runs, and setup won't run until visible.

Updates inside the hidden tree happen at background priority.

The syntax is straightforward and uses a mode prop:

 where you want the user to return to exactly where they left off without wasting CPU cycles while the component is out of sight. Note: The contents 

 Because <Activity> keeps the DOM nodes in the tree, using it for hundreds of heavy components simultaneously can increase your app's memory footprint.It is best used for high-level views or complex forms rather than every small UI element.

Learn more about the React 19.2 new Feature - The Activity Component

React's new Activity Component

Managing collections of data in your Redux store can quickly become complex. Think about lists of users, products, or tasks. If you're storing them as simple arrays, operations like finding an item, updating it, or deleting it can be inefficient and lead to convoluted reducer logic. This is where 

 comes in, and Redux Toolkit's createEntityAdapter is your best friend for achieving it effortlessly.

In this post, we'll dive deep into createEntityAdapter, understand why it's a game-changer, and walk through real-world examples to show you how to streamline your Redux state management.

What is Normalized State and Why Do We Need It?

Before createEntityAdapter, let's briefly touch on normalized state. Imagine you have an array of Post objects:

To find a post by ID, you'd iterate through the array. To update it, you'd map over the array. As your data grows, these operations become less performant.

Normalized state, inspired by database normalization, stores your data in a flatter structure, typically with an object where keys are IDs and values are the entities themselves, alongside an array of those IDs:

This structure offers several advantages:

 Access any entity directly by its ID (posts.entities['1']) in O(1) time.

 Operations become direct property assignments or deletions.

 Avoids data duplication, making your state more predictable.

The catch? Manually maintaining ids and entities can be tedious and error-prone. Enter 

is a utility from Redux Toolkit that provides a standardized way to manage normalized data in your Redux store. It gives you:

 Functions to add, update, remove, and upsert entities.

 Memoized selectors to efficiently retrieve entities, IDs, or the total count.

 Significantly reduces the amount of code you need to write for common entity operations.

Real-World Example 1: Managing a List of Products

Imagine an e-commerce application where you need to display, add, update, and remove products.

Now, let's create our product slice using 

to tell the adapter which field acts as the unique identifier. We also added an optional 

to keep our ids array sorted by product name.

 Notice how we directly assign adapter methods like addOne, removeOne, updateOne, etc., to our reducers. These methods take care of all the 

 to efficiently load the products fetched from our simulated API call.

 is incredibly powerful. It generates memoized selectors that can retrieve all entities as an array, an entity by ID, just the IDs, or the total count, all with minimal effort on your part. You just need to pass it a function that gets the correct slice of your state.

Real-World Example 2: Managing Tasks with Multi-Select and Bulk Actions

Consider a task management application where users can select multiple tasks and perform actions like marking them as complete or deleting them.

 You can easily combine createEntityAdapter's initial state with your own custom state properties (e.g., selectedTaskIds, status).

 addMany, removeMany, and updateMany are incredibly powerful for handling multiple entities at once, perfect for multi-select scenarios.

 You can still write your own reducers for logic not directly covered by the adapter (like toggleTaskSelection).

 Using createSelector from reselect (which Redux Toolkit re-exports), you can build sophisticated selectors that combine the adapter's selectors with your custom state, like selectSelectedTasks.

 (users, posts, products, tasks, comments, etc.).

 (create, read, update, delete) on individual items or groups of items.

For single, non-collection entities (e.g., a logged-in user's profile which is never an array).

For data where IDs are not unique or where the concept of "entity" doesn't quite fit.

For very small, static lists where the overhead might not be worth it (though it's often still beneficial for consistency).

is a cornerstone utility within Redux Toolkit that empowers developers to manage normalized data with unparalleled ease and efficiency. By providing standardized reducers and highly optimized selectors, it significantly reduces boilerplate and potential for bugs in your Redux state. If you're working with collections of data in your Redux applications, integrating 

is a clear path to cleaner, more performant, and maintainable code.

Start leveraging it today and experience the difference!

Discover how Redux Toolkit's createEntityAdapter simplifies managing collections of data, offering powerful selectors and reducing boilerplate. Learn with real-world examples!

Level Up Your Redux State Management: Mastering createEntityAdapter for Normalized Data

ES6 also known as ECMAScript introduced a wide range of powerful features to JavaScript. Here's a comprehensive list with explainations and examples:

Set default values for function parameters.

Shorthand for Object properties and methods.

Unique and immutable data type for object keys.

 is an object that defines a sequence and potentially a return value upon completion.

 that makes creating iterators much simpler.

You define a generator using the function* syntax, and you use yield to return values.

Copy properties from source to target object.

 — similar to ===, but with a few important differences.

1. NaN === NaN, === will result in false but Object.is() will result to true.

2. +0 === -0, === will result in true but the Object.is() will result to false.

Array.find() gives first element which is which satisfies the condition.

Array.findIndex() gives the index of that element.

18. String.includes(), startsWith() and endsWith() :

Syntactic sugar for prototypal inheritance.

ES6 (ECMAScript 2015) introduced a wide range of powerful features to JavaScript. This article lists all of those new features.

ES6 new features

You can animation basically everything with the "motion" component which is a DOM element with animation capabilities. 

For basic animation, use "animate" prop of motion.

By default Motion will add smooth transition based on what type of value is animated, 

for example - x or scale will have spring type effect, whereas color or opacity will have easing curves.

However, we could define our own animations using 

 props to  motion component in order to animate components, In order to completely disable the initial animation set initial to false.

This will make he element render values given in animate prop.

When a component is completely removed from the DOM, it is difficult to animate.
In order to tackle this, Motion provides 

component which when wrapped to a component will keep the component in the DOM until animation is finished. You also need to give "

prop can be set as a value of keyframes. This will animate through each value in sequence.

We can use a value's current state as the initial keyframe by setting it to null.

is useful for single element animation, Another way is using "variants".

They're passed to motion components via the variants prop:

These variants can now be referred to by a label, wherever you can define an animation target:

You can also define multiple variants via an array:

Variants will flow down through motion components. So in this example when the ul enters the viewport, all of its children with a "visible" variant will also animate in:

Each variant can be defined as a function that resolves when a variant is made active.

These functions are provided a single argument, which is passed via the custom prop:

 instead of React state to update style will also avoid re-renders.

Overview of Motion Animations

Introduction to Motion animations

Motion extends basic sets of event listeners with a powerful set of UI gestures.
Currently it has support for - hover, tap, pan, drag and inView. Each gesture has both a set of event listeners and a while- animation prop.

Motion provides multiple gesture animation props - whileHover, whileTap, whileFocus, whileDrag and whileInView. Using these the animation target can define animations while the gesture is active.

In all of these, we can either set animation values or the name of any variants defined via the variant prop. 

Hover gesture detects when a pointer hovers over or leaves a component. 

These contains gesture animation prop such as whileHover and event handler like onHoverStart and onHoverEnd.

Tap gestures gets detected when pointer is clicked and released on the same point.

event when the pointer taps or ends click on the same component it started on, and fires 

event if it does not ends on the same component.

Some animation props are - onTapStart, whileTap, onTap, tapCancel.

The Pan gestures detects when a pointer is pressed down on a component and moves further than 3 pixels. It ends with release in pointer.

Pan gestures does not have while- animation prop.

Drag gesture applies when a pointer drags a component over the x/y axis.

prop to false in order to prevent element from performing an inertia animation, which happens by default.

You can set constrains by either of two options:

Use dragConstraints prop and set value as an object with keys left, right, top, bottom.

Set a "ref" to a container and pass the same ref to the dragConstraint as a value.

with the container as a ref will allow draggable element to pass the container but eventually gets back to the parent container with some elasticity. In order to control elasticity tweak value of the prop 

In order to lock the direction of the drag, we can use 

. This will lock the element to the first axis its dragged on.

Focus gestures detects when a component gains or loses focus.

A child component can stop drag and tap gestures and their related while animations from firing on parents by passing 

This article gives basic understanding of motion's gesture animations

Gesture animations in Motion dev

Scroll Animation are those types of animations that are triggered or controlled by the user's scroll behavior.

 : An animation gets triggers when an element enters or leaves the viewport.

 : Values are linked directly to scroll progress.

Scroll-triggered animations are normal animations that are fired when an element enters the viewport. For this, Motion offers 

The animation gets triggered whenever the element enters or leaves the viewport. 
We can use 

prop, and set { once: true } to run the animation just once.

By default, The element is said to be within the viewport if it enters/leaves the browser window. Here, the browser window is the scroll container. 

In order to change the scroll container, you can provide a 

to another scrollable container. For example -

You can also set states when any element (not just a motion component) enters or leaves the viewport using 

Scroll-linked animations are created using 

useScroll Hook returns four motion values, 

Two of them store scroll offset in pixels (scrollX and scrollY).

The Other two store scroll progress as a value between 0 and 1 (scrollXProgress and scrollYProgress).

These motion values could be passed to specific styles to animate an element.

For example, we can pass scrollYProgress to scaleX to form a progressbar.

You can also use progress motion values like scrollYProgress to smoothen its value using 

 hook and use it to mix between any values like colors using 

This article will give you a brief description about scroll animations in Motion dev.

What are Scroll animations in Motion?

Suppose you want to clone one of the example template from the official repository of Next JS Github. How would you do that?


Runs a tool temporarily without installing it.

This is the tool to create a new Next.js app. @latest just means "use the latest version."

You're saying, "I want to use a ready-made template (example)."

Replace this with the name of the example (like with-tailwindcss, with-redux, etc.).

This is what your app folder will be called. You can name it anything.




 - If you want to install "gsap" example template of next JS, then you would write:


This document teaches you to clone the example template from next JS official Github repository.

How to clone example template from Next JS repository?

A debounce function can be used when you want to execute a function after a certain delay once the user stops trigerring it.
Let's learn how to use debouncing in React.

We can implement debouncing with a combination of useEffect and setTimeout in React (For Functional components).

We start by creating a state variable "debouncedValue" in the above example.
We then create a "useeffect" hook, which will run when the component is initialised and when value or delay is updated.

Inside the "useeffect" hook, we declare a handler function which holds the "setTimeout" function, The setTimeout function will executes the code inside when the delay value is reached. 

Suppose a user inputs a value and waits for the delay, The debounce useEffect will run saving the value in debouncedValue.

If the user inputs a value and types before the delay is reached, the cleanup function of useeffect will run clearing out all timeout functions and new setTimeout will be run saving the new value intil the delay time has reached.

Debouncing is a great way to handle re-rendering in react. 

learn how to use debounce function and reduce re-renders in your react website.

How to use Debouncing in React?

MUI (Material-UI) is a popular React component library that provides a set of pre-designed, customizable UI components based on Google’s Material Design guidelines. It helps developers build modern and responsive web applications by offering components like buttons, cards, dialogs, grids, icons, and more. These components are highly customizable and themable, making it easier to maintain a consistent design system across an app while reducing development time.

MUI is especially useful if you're working with React and want to quickly build UI elements that are both visually appealing and functional without having to design each component from scratch.

Let’s go through some examples of MUI components and see how they work in a React project.

To get started, you first need to install MUI in your project. Run the following commands in your project directory:

This example provide a starting point for using MUI components in a React project. By combining these and other MUI components, you can create an entire, responsive, and well-designed UI.

Transform Ideas into Impact

Discover Handpicked Insights

useEffectEvent Hook - React's new hook

React's new Activity Component

Level Up Your Redux State Management: Mastering createEntityAdapter for Normalized Data

Copyright © 2026 Web Journal. All Rights Reserved