As React developers, we’ve all encountered scenarios where we need to render lists of data. While .map() method works well, repeating the same logic every time render a list can become exhausting, and leads to code duplication. Fortunately, there’s a cleaner, scalable way to handle this, using reusable component, higher order component, or custom hook.

In this article, I’ll share an approach for improving list rendering in React, ensuring your code stays DRY, reusable, and easier to maintain.

Main Problem: Repetitive .map() Logic

Imagine you’re building a dashboard for an e-commerce application. The dashboard includes several lists: recent orders, top-selling products, user comments, etc. You need to render each list using a `.map()` function. Here’s a typical example:

const orders = [...]; // Array of order data

return (
  <>
    {orders.map((order, index) => (
      <OrderComponent key={index} data={order} />
    ))}
  </>
);

Now, you can see repeating the .map() logic for every list, cluttering your component with similar code. Here’s where reusable pattern can be handy.

Solution: A Reusable ListComponent

To avoid duplicating the .map() logic, we can create a reusable ListComponent that abstracts the mapping logic and allows us to render different components based on the data.

function ListComponent({ data, renderItem }) {
 return (
 <>
  {data.map((item, index) => renderItem(item, index))}
 </>
 );
}

Usage:

<ListComponent 
 data={orders} 
 renderItem={(order, index) => (
 <OrderComponent key={index} data={order} />
 )} 
/>

In this pattern:
renderItem: A function that defines how each item should be rendered

By passing a different renderItem function, we can reuse ListComponent for any list. This results in a clean, reusable component, reducing repetitive .map() logic.

More Flexibility: Higher-Order Component(HOC)

If multiple components need list rendering, let’s take this pattern further by creating a HigherOrder Component. A HOC allows to enhance any component with additional functionality — in this case, list rendering.

function withListRendering(WrappedComponent) {
 return function ListWrapper({ data, …props }) {
 return (
 <>
 {data.map((item, index) => (
 <WrappedComponent key={index} data={item} {…props} />
 ))}
 </>
 );
 };
}

Usage:

const EnhancedOrderComponent = withListRendering(OrderComponent);
// Now render the component with any data array
<EnhancedOrderComponent data={orders} />

By wrapping OrderComponent with the withListRendering HOC, we’ve automatically added list rendering behavior without modifying the original component. This pattern keeps code modular.

For Hook Lovers: Custom Hook for List Rendering

React hooks offer a functional way to encapsulate logic. If you prefer using hooks, here is an example of list rendering with a custom hook.

function useListRenderer(data, renderItem) {
 return data.map((item, index) => renderItem(item, index));
}

Usage:

function OrdersDashboard({ orders }) {
 const orderList = useListRenderer(orders, (order, index) => (
 <OrderComponent key={index} data={order} />
 ));
return <>{orderList}</>;
}

This approach moves .map() logic into the hook, keep the rendering logic separate from the component’s structure. It’s another way to keep component lean and focused on presentation.

Real-World Scenario: An E-Commerce Dashboard

Let’s apply this pattern to a real-world scenario. Imagine you’re building an e-commerce admin dashboard where multiple lists of orders, products, reviews, etc need to be rendered.

Using the ListComponent approach, you could render a list of orders like this:

<ListComponent 
 data={orders} 
 renderItem={(order, index) => (
 <OrderComponent key={index} data={order} />
 )} 
/>

When we need to render a different list, such as a products, same ListComponent can be reused with different renderItem function:

<ListComponent 
 data={products} 
 renderItem={(product, index) => (
 <ProductComponent key={index} data={product} />
 )} 
/>

No need to rewrite the .map() logic — just reuse the ListComponent with different data and components. This makes codebase more maintainable as it grows.

Conclusion: Clean, Reusable, and Scalable Code

The reusable ListComponent pattern simplifies React list rendering by abstracting the repetitive `.map()` logic. Whether you prefer using the basic component approach, HOC, or custom hook, this pattern ensures code is clean and reusable.

Building a React component with multiple lists, consider using one of these patterns to keep components focused on presentation while separating the list logic outside.

What other reusable patterns have you found useful in React? Let me know in the comments! and finally thanks for reading.

JavaScript provides several ways to handle timing events, and two of the most commonly used methods are `setTimeout` and `setInterval`. These functions allow you to schedule code execution after a specified amount of time or repeatedly at regular intervals. In this article, we’ll explore how these functions work and provide practical examples to illustrate their usage.

setTimeout

The setTimeout function is used to execute a function or a piece of code once after a specified delay. The syntax for `setTimeout` is as follows:

javascript
setTimeout(function, delay, [arg1, arg2, …]);

- function: The function or code to execute.
- delay: The time in milliseconds to wait before executing the function.
- [arg1, arg2, …]: Optional arguments to pass to the function when it is executed.

Example 1: Basic Usage

javascript
function sayHello() {
 console.log(‘Hello, World!’);
}

setTimeout(sayHello, 2000); 
// Outputs “Hello, World!” after 2 seconds

In this example, the sayHello function is executed once after a 2-second delay.

Example 2: Passing Arguments

javascript
function greet(name) {
 console.log(‘Hello, ‘ + name + ‘!’);
}

setTimeout(greet, 2000, ‘Alice’); 
// Outputs “Hello, Alice!” after 2 seconds

Here, we pass the argument ‘Alice’ to the greet function, which is executed after a 2-second delay.

Example 3: Using Anonymous Functions

javascript
setTimeout(function() {
 console.log(‘This is an anonymous function!’);
}, 3000); 
// Outputs “This is an anonymous function!” after 3 seconds

You can also use anonymous functions directly within setTimeout.

setInterval

The setInterval function is used to execute a function or a piece of code repeatedly at specified intervals. The syntax for setInterval is similar to setTimeout:

javascript
setInterval(function, interval, [arg1, arg2, …]);

- function: The function or code to execute.
- interval: The time in milliseconds between each execution.
- [arg1, arg2, …]: Optional arguments to pass to the function each time it is executed.

Example 1: Basic Usage

javascript
function sayHello() {
 console.log(‘Hello, World!’);
}

setInterval(sayHello, 1000); 
// Outputs “Hello, World!” every 1 second

In this example, the sayHello function is executed every second.

Example 2: Passing Arguments

javascript
function greet(name) {
 console.log(‘Hello, ‘ + name + ‘!’);
}

setInterval(greet, 1000, ‘Alice’); 
// Outputs “Hello, Alice!” every 1 second

Here, we pass the argument ‘Alice’ to the greet function, which is executed every second.

Example 3: Using Anonymous Functions

javascript
setInterval(function() {
 console.log(‘This is an anonymous function!’);
}, 2000); 
// Outputs “This is an anonymous function!” every 2 seconds

You can use anonymous functions directly within setInterval as well.

Clearing Timers

Both setTimeout and setInterval return a timer ID, which can be used to clear the timers if needed. This is done using the clearTimeout and clearInterval functions, respectively.

Example: Clearing setTimeout

javascript
const timeoutId = setTimeout(function() {
 console.log(‘This will not run.’);
}, 5000);

clearTimeout(timeoutId); // Cancels the timeout

Example: Clearing setInterval

javascript
const intervalId = setInterval(function() {
 console.log(‘This will run only once.’);
}, 1000);

setTimeout(function() {
 clearInterval(intervalId); // Stops the interval after 3 seconds
}, 3000);

In this example, the clearInterval function is called after 3 seconds, stopping the repeated execution of the function.

Practical Use Cases

1. Debouncing with setTimeout

Debouncing is a technique to limit the rate at which a function is executed. For example, you can use setTimeout to debounce a search input field:

javascript
let timeoutId;

function debounceSearch(query) {
 clearTimeout(timeoutId);
 timeoutId = setTimeout(function() {
 // Perform search operation
 console.log(‘Searching for:’, query);
 }, 300);
}

document.getElementById(‘searchInput’).addEventListener(‘input’, function(event) {
 debounceSearch(event.target.value);
});

2. Creating a Simple Timer with setInterval

let seconds = 0;

function updateTimer() {
 seconds++;
 console.log(‘Timer:’, seconds);
}

const timerId = setInterval(updateTimer, 1000);

// Stop the timer after 10 seconds
setTimeout(function() {
 clearInterval(timerId);
 console.log(‘Timer stopped’);
}, 10000);

Conclusion

Understanding setTimeout and setInterval is essential for managing timed and repeated actions in JavaScript. These functions enable you to handle tasks like debouncing user input, creating timers, and running periodic updates. By mastering these tools, you can build more efficient web applications.

Closures are a powerful feature in JavaScript that allow functions to retain access to their lexical scope, even when the function is executed outside that scope. This can sound abstract, but with some simple examples, you’ll see how closures can be both intuitive and incredibly useful in real-world applications.

What is a Closure?

A closure is created when a function is defined within another function, and the inner function retains access to the outer function’s variables. Essentially, a closure gives you access to an outer function’s scope from an inner function.

Here’s a simple definition:
Closure: A combination of a function and its lexical environment within which that function was declared.

Basic Example

Let’s start with a basic example to illustrate the concept of closures:

function outerFunction() {
  let outerVariable = 'I am from the outer function';
function innerFunction() {
    console.log(outerVariable);
  }
  return innerFunction;
}
const myClosure = outerFunction();
myClosure();  // Outputs: I am from the outer function

In this example:

• outerFunction contains a variable outerVariable and an inner function innerFunction.
• innerFunction accesses outerVariable and logs it to the console.
• outerFunction returns innerFunction, and we store it in myClosure.
• When myClosure is called, it still has access to outerVariable even though outerFunction has finished executing. This is a closure in action.

Real-World Example: Creating Private Variables

Closures are often used to create private variables in JavaScript. Here’s an example of how you can use closures to encapsulate data and provide a controlled interface to interact with it:

function createCounter() {
  let count = 0;
return {
    increment: function() {
      count++;
      console.log(count);
    },
    decrement: function() {
      count--;
      console.log(count);
    },
    getCount: function() {
      return count;
    }
  };
}
const counter = createCounter();
counter.increment(); // Outputs: 1
counter.increment(); // Outputs: 2
counter.decrement(); // Outputs: 1
console.log(counter.getCount()); // Outputs: 1

In this example:

• createCounter function defines a variable count and returns an object with three methods: increment, decrement, and getCount.
• The methods increment and decrement modify count, while getCount returns its current value.
• The count variable is private to createCounter and cannot be accessed directly from outside. This encapsulation is made possible by closures.

Real-World Example: Delayed Execution

Closures are also useful for functions that need to remember the context in which they were created, such as setting up delayed execution with setTimeout:

function greet(name) {
  return function() {
    console.log('Hello, ' + name);
  };
}

const delayedGreeting = greet('Alice');
setTimeout(delayedGreeting, 2000); // Outputs: Hello, Alice after 2 seconds

In this example:

• greet function returns another function that logs a greeting message.
• delayedGreeting stores the returned function with the captured name variable.
• setTimeout executes delayedGreeting after 2 seconds, and it still has access to name (Alice) due to the closure.

Conclusion

Closures are a fundamental concept in JavaScript that allow functions to access their lexical scope even after the outer function has finished executing. They enable powerful patterns such as data encapsulation, private variables, and delayed execution.

And Finally,

Please don’t hesitate to point out any mistakes in my writing and any errors in my logic.

I’m appreciative that you read my piece.

Chunking an array means splitting it into smaller arrays of a specified size. This is useful for data processing, pagination, and more. We’ll explore four methods to chunk an array and compare their performance.

First, let’s create an array of numbers from 1 to 10:

const arr = Array.from({ length: 10 }, (_, i) => i + 1);

Array.from() is used to generate an array with elements from 1 to 10.
Now, we’ll look at four ways to chunk this array.

Method 1: Using a For Loop

function chunkArr(arr, size) {
 let res = [];
 for (let i = 0; i < arr.length; i += size) {
 res.push(arr.slice(i, size + i));
 }
 return res;
}

console.time("for");
console.log(chunkArr(arr, 2));
console.timeEnd("for");

Output:

[ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ], [ 7, 8 ], [ 9, 10 ] ]
for: 4.363ms

Explanation: This function iterates through the array in steps of the specified chunk size. It slices the array at each step and adds the resulting sub-array to the result array (res). The performance measurement shows it took about 4.363 milliseconds.

Method 2: Using `Array.reduce()`

function chunkArr2(arr, size) {
 if (size <= 0) throw new Error('Chunk size must be a positive integer');
 return arr.reduce((acc, _, i) => {
 if (i % size === 0) acc.push(arr.slice(i, i + size));
 return acc;
 }, []);
}
console.time("reduce");
console.log(chunkArr2(arr, 2));
console.timeEnd("reduce");

Output:

[ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ], [ 7, 8 ], [ 9, 10 ] ]
reduce: 0.069ms

Explanation: Here Array.reduce() is used to build the chunked array. It checks if the current index is a multiple of the chunk size and slices the array accordingly. This method is significantly faster, taking only about 0.069 milliseconds.

Method 3: Using `Array.splice()`

let [list, chunkSize] = [arr, 2];
console.time('splice');
list = […Array(Math.ceil(list.length / chunkSize))].map(_ => list.splice(0, chunkSize));
console.timeEnd('splice');
console.log(list);

Output:

[ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ], [ 7, 8 ], [ 9, 10 ] ]
splice: 0.048ms

Explanation: This approach uses Array.splice() in combination with Array.map() to chunk the array. It creates a new array with the required number of chunks and uses splice() to remove and collect chunks from the original array. This method is also very fast, taking about 0.048 milliseconds.

Method 4: Recursive Approach

const chunk = function(array, size) {
 if (!array.length) {
 return [];
 }
 const head = array.slice(0, size);
 const tail = array.slice(size);
return [head, …chunk(tail, size)];
};

console.time(‘recursive’);
console.log(chunk(arr, 2));
console.timeEnd(‘recursive’);

Output:

[ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ], [ 7, 8 ], [ 9, 10 ] ]
recursive: 4.372ms

Explanation: This recursive method splits the array into the first chunk (head) and the remaining elements (tail). It then recursively processes the tail, concatenating the results. While more elegant, this method is slower than the reduce and splice methods, taking about 4.372 milliseconds.

Conclusion

All four methods successfully chunk the array into sub-arrays of the specified size. However, their performance varies significantly:

1. For Loop: 4.363ms
2. Reduce: 0.069ms
3. Splice: 0.048ms
4. Recursive: 4.372ms

The splice and reduce methods are the fastest, making them preferable for performance-critical applications. While functional, the for loop and recursive methods are slower and might be less suitable for large datasets.

Depending on your needs and readability preferences, you can choose a suitable method for chunking arrays in your JavaScript projects.

You can find more approach here

And Finally,

Please don’t hesitate to point out any mistakes in my writing and any errors in my logic.

I’m appreciative that you read my piece. Please remember to clap and share this post with your fellow developers.

Empty HREF: href=""

Using an empty href attribute (href="") reloads the current page. This is like clicking the refresh button of the browser.

href="#"

The href=”#” attribute makes the page scroll to the top. If you don’t want this, you can stop the behavior with JavaScript:

<a href=”#” onclick=”return false;”>Hey</a>
<!--! and there ane many ways with js to achive this -->

href="javascript:void(0)"

Sometimes you will see href="javascript:void(0);" inside an <a> tag. This makes a link that does nothing when clicked. Other ways to do this are:

• href="javascript:{}"
• href="javascript:null"

These links do nothing it’s best to avoid them.

href="#any_id"

The href="#any_id" attribute does nothing unless have an element with an ID of any_idon the page. By clicking the link will scroll to that element.
To avoid any scroll use a different id value that doesn't exist on the page.

Best Practices:

Use a Button or Span: If your link doesn’t navigate anywhere, you can use <button> or <span> instead of an <a> element as well as you can style these elements as needed using raw CSS or CSS framework.

Lastly, let’s summarize these

href="#" scrolls the current page to the top.

href="javascript:void(0)" does nothing.

href="#any_id" does nothing unless there is an element with the specific ID.

And finally

I’m appreciative that you read my piece. Please remember to clap and share this post with your fellow developers.

This problem is similar to the “Two Sum” problem, and how can we come up with an efficient solution just by making a small modification. After that, we will also give you a try of the code so that you can understand it well. So let’s get started.

First of all, let’s make sure that we understand the problem statement correctly. In this problem, we have given an array of integers, and we have to find out all the unique triplets such that their sum is equal to 0, and there is one more condition: we cannot choose the same index twice. It simply means that if we have chosen an index, we cannot use it again to find the total sum of 0.

So given all of these conditions, we have to find out all of the possible triplets. Let us look at our sample test cases. In our first test case [-1, 0, 1, 2, -1, -4], right now, what are some of the triplets that, when summed, will give us the total sum of 0. First of all, I can find a triplet of -1, -1, and 2. If we add all of them, we will get the sum 0, and similarly, we can get one more triplet that will be 0, 1, and -1. In this particular array, we have two unique triplets by which we can form the total sum as 0. right? So for this particular test case, these two triplets will be our answer.

In our next test case, we have [0, 1, 1], so this is the only triplet, and if we sum all of these elements, the sum will not be 0, right? So for this particular test case, an empty array will be the answer.

Now let us look at our third test case. we can see that once again we have an array [0, 0, 0], and all of its elements are zero. Now we know that it says that these elements cannot be duplicated, but if we notice, we are not duplicating the indices. correct? Only the element is duplicated, so even if two elements have the same value and they are at different indices, we can pick them, so one such triplet that can be formed will be 0 0, and 0, and if we add them all up, we get the total sum of 0.

So for this particular test, only this triplet will be answered.

I want to let you know that this problem is based on a similar problem, “Two Sum,” where we have given an array and have to find out two integers whose sum equals a target value. I want you to take a recap and realize what we did wrong with our original and what we did right. We spotted this array correctly, and as soon as we sort it, we get our array something like [-4, -1, -1, 0, 1, 2] and let us have to find out two values that sum up and give our target value of -3.

So what was the approach over here? We sorted the array, and then what did we do?

We took two pointers first in the beginning, and then at the very end, we summed both of these values, so my current sum will be -4 plus 2 and that is -2. Now since this target value is smaller than my sum, that means we have to pick a smaller number, and how did we pick a smaller number? We moved our right pointer one space backward, and that is how we will try to get the sum as -4 plus 1, and that will be -3 for our pair.

So just try to keep this in mind, and based upon this, we will build an efficient solution to our actual problem.

So once again, we have a sample array, and what did we do? First of all, we sorted it as soon as we found the array, and the array will look something like this: [-4, -1, -1, 0, 1, 2], and now we have to convert this problem to the two-sum problem.

So here is something that we can do. What we can do is pick our first element to be -4, so out of the triplet we get one value or we fix one value so that one of our values will be minus four, and we make a condition so that one of my values is -4, and what if the array that I’m remaining with is this entire array [-1, -1, 0, 1, 2]. right?

Now notice what our problem has reduced to: using this array, we can once again take a left pointer and a right pointer. correct? and we have one value that is fixed for now. Instead of finding the triplets, we have to find that pair plus this fixed value, and our total sum should be 0.

So we will apply the same approach as ours to some questions, and what we’re going to do is take the minor 4 value and then try to find a triplet such that when I add these three values, my total sum should be 0.

Just wait for a little while, and all of this will start making sense.

For this particular condition, when we choose our first value as -4, we will not find a triplet, so this part is done. Now try to understand that we took care of all the triplets that could start with -4 right now. we have to move ahead, so what do we do this time? we are going to choose -1 as our fixed value. That is the value at the first index, so we fix our value to -1, and then what is the array that I’m remaining with? We are remaining with only [-1, 0, 1, 2]. So we have an array over here.

So once again, our problem changes. Now the fixed value is -1, and once again, we will take two pointers left and right, and then we will try to come up with a pair plus this -1, and the sum should be 0.

This should give us some triplets, so we have a value of -1, and then what can we do? we can try to find a triplet of -1 and 2 that will be 0, and then if we move ahead, we will find one more triplet of -1 plus 0 and then 1. that is once again equal to 0. So I found two triplets, and one added gives us the sum as 0, which is correct.

I hope it has started to make a little bit of sense, so let us keep moving ahead.

This time I’m done with this -1 again, and if we see we have one more -1 for this time, I’m going to fix this value as my constant value. What is the array [0, 1, 2] that I’m remaining with? I am remaining with 0 1 and 2. So once again, my problem reduces to 0, 1, and 2, and I will take a left pointer and a right pointer, this is my fixed value, so once again, I will try to find a pair along with the sixth value and try to get the total reward of 0. This time I will get one more triplet, which is -1 plus 0 plus 1, and that is equal to 0. Just keep moving ahead now, so now I will fix my next value, which is 0, so I fix it, and what are the remaining values 1 and 2? So this is the new use case that I have to work with, and if we realize this, it will once again not give me any triplets. So while going through all of this, how many triplets did we find? we found this, this, and this, so there are three triplets. Since the problem asks for unique triplets, we can add all of these triplets to a function. All the duplicate values will just go away, and we cannot have duplicate elements left with our answer, and these will be our unique triplets.

const threeSum = function (nums) {
 const target = 0;
 nums = nums.sort((a, b) => a - b);
 let output = [];

 for (let i = 0; i < nums.length; i++) {
  let start = i + 1;
  let end = nums.length - 1;

  while (start < end) {
   let sum = nums[i] + nums[start] + nums[end];
   if (sum == target) {
    output.push([nums[i], nums[start], nums[end]]);
    start++;
    end--;
   } else if (sum < target) {
    start++;
   } else {
    end--;
   }
  }
 }

 // remove duplicate arrays
 const uniqueArrays = new Set(output.map(JSON.stringify));
 const result = Array.from(uniqueArrays, JSON.parse);
 return result;
};

let nums = [-1, 0, 1, 2, -1, -4];
console.log(threeSum(nums));

In Conclusion,

In conclusion, the problem at hand is to find unique triplets in an array such that their sum equals zero, with the constraint of not using the same index twice. To approach this efficiently, we draw parallels with the “Two Sum” problem, sorting the array and fixing one element at a time to transform the problem into finding pairs that sum up to a target value. By iteratively fixing elements and applying the two-pointer technique on the remaining array, we can identify unique triplets that satisfy the given conditions.

The key insight is to break down the problem into smaller subproblems, where each fixed element reduces the problem to finding pairs in the remaining array. This approach helps us avoid duplicate triplets and efficiently navigate through the array to identify all valid solutions.

By following this method and carefully handling edge cases, such as arrays with identical elements at different indices, we can find and accumulate unique triplets that meet the criteria. The final step involves ensuring uniqueness by eliminating duplicate triplets before presenting the solution.

Overall, this strategy optimizes the solution to the problem, providing a clear and systematic approach to finding unique triplets with a sum of zero in a given array.

And Finally,

Please don’t hesitate to point out any mistakes in my writing and any errors in my logic.

I’m appreciative that you read my piece. Please remember to clap and share this post with your fellow developers.

Reconciliation

React’s diff algorithm compares two trees to identify the parts that require modification or update.

Update
a change to the data that a React application renders. typically the outcome of setState. leads to a re-render in the end. The big idea in React is to think of updates as if the whole app is being re-rendered each time there’s a change. Instead of worrying about how to move the app from one state to another, React lets developers think more simply and clearly.

re-rendering the entire app every time something changes works well for really simple apps. But in more complex apps, it’s not efficient because it uses up a lot of computer power. React has tricks that make it look like the whole app is being refreshed without actually doing it. This process is called “reconciliation.”

Reconciliation vs Rendering

React is flexible because it separates reconciliation and rendering into two steps. Reconciliation figures out what parts of the app need to change, and rendering actually makes those changes visible. React and React Native can use their own ways of showing things on the screen but still share the same reconciliation process from React.

Scheduling
The key points are:

• In a UI, every update doesn’t need to be applied immediately; in fact, doing so can be wasteful, causing frames to drop and degrading the user experience.
• • Different kinds of changes have different levels of importance. For example, making an animation smooth is more important than updating some information from a data store.
• There are two approaches to deciding when to make changes: one where you (the programmer) decide, and another where React (the framework) decides for you.

What is a fiber?

Fiber is to enable React to take advantage of scheduling. Specifically, It lets React:

• pause work and come back to it later.
• assign priority to different types of work.
• reuse previously completed work.
• abort work if it’s no longer needed.

In order to do any of this, we first need a way to break work down into units. In one sense, that’s what a fiber is. A fiber represents a unit of work.

The first thing we need to know is that Redux basically follows three main principles,

1. A complete application will have a single state tree or object tree. The advantage is that the application can be easily debugged and it ensures a single source of truth for the data.
2. The state will be read-only which can only be changed by doing the action dispatch. That means sometimes if someone needs to change the state they will just dispatch the specific action. Here action is a simple JavaScript object that holds all the information about that action like what type of action will be, what data needs to be changed etc.
3. After dispatching a particular action, the state needs to be changed through the necessary pure functions called reducers in Redux.

Now let’s see how we will use redux. Suppose we want to make a small counter application, Where we can show the count, we can control the increment degree separately and keep the history at the same time, if we want we can clear the count or history separately or with one click.

So to make this application in React, our component will be like the picture below.

Step 1 — Installing required libraries

yarn add redux react-redux

Step 2 — Create Actions, Action Types, Action Creators, Reducer and Store

let's create a store.js file inside of the src folder. The Redux Store holds the state of the app. The app is always subscribed to the store.

store.js contain the following code,

import { combineReducers, createStore } from 'redux';

// Action Type
export const DECREMENT = 'decrement';
export const INCREMENT = 'incriment';
export const CLEAR_COUNT = 'clear-count';

// actions
// Action types are constants that are used to define the values used for the type property of Actions.
// An action is any object with a type property. Actions help us describe what needs to happen.
// also actions contain payload
// Action Creator
// An action creator is simply a JS function that returns an action.
export const incriment = (payload) => ({
 type: INCREMENT,
 payload,
});

export const decriment = (payload) => ({
 type: DECREMENT,
 payload,
});

export const clearCount = () => ({
 type: CLEAR_COUNT,
});

// reducer
// A reducer is a JS function that takes in initialState and action as input and returns an updated state object.
// When an action is dispatched, the relevant reducer will update the state according to the action.
const countReducer = (/* previous State */ state = 0, action) => {
 // processing area
 switch (action.type) {
  case INCREMENT:
   return state + action.payload;
  case DECREMENT:
   return state - action.payload;
  case CLEAR_COUNT:
   return 0;

  default:
   return state;
 }
 // returned stste is next state
};

// actions
const ADD_TO_HISTORY = 'addToHistory';
const CLEAR_HISTORY = 'clearHistory';

let id = 1;
function generateId() {
 return id++;
}

function getTime() {
 const t = new Date();
 return t.toLocaleTimeString();
}

// Action Creator
export const addHistory = (history) => ({
 type: ADD_TO_HISTORY,
 payload: {
  id: generateId(),
  action: history.action,
  count: history.count,
  time: getTime(),
 },
});

export const clearHistory = () => ({
 type: CLEAR_HISTORY,
});

const historyReducer = (state = [], action) => {
 switch (action.type) {
  case ADD_TO_HISTORY:
   return [...state, action.payload];

  case CLEAR_HISTORY:
   return [];

  default:
   return state;
 }
};

const store = createStore(
 combineReducers({
  count: countReducer,
  history: historyReducer,
 })
);

export default store;

Feeling Overwhelmed?
Don't worry, we just finished the most complex part of our app.

if you want you may divide the given store.js into chunks of code into different file like actions.js, actionCreator.js, reducer.js, and store.js in my case I’m doing all a single store.js

Step 3 — Wrap the Root Component with the Provider

in main.jsx (vite create react)

<Provider store={store}>
  <App />
</Provider>

Step 4 — useDispatch() and useSelector()

You can use useSelector() to access the states in the Redux store.

You can use useDispatch() to access the dispatch method which helps you to dispatch actions

let's do that,

now create a components folder inside of src, then create count.jsx, IncrementButton.jsx, DecrementButton.jsx, History.jsx and ClearHistory.jsx file inside of your components folder

write the following code into count.jsx

import { useSelector } from 'react-redux';

const Count = () => {
 const count = useSelector((state) => state.count);
 console.log(count);
 return (
  <div>
   <h1>Count: {count}</h1>
  </div>
 );
};
export default Count;

write the following code into IncrementButton.jsx

import { useDispatch } from 'react-redux';
import { INCREMENT, addHistory, incriment } from '../store';

const IncrimenntButton = () => {
 const dispatch = useDispatch();

 const handleClick = () => {
  dispatch(incriment(1));
  dispatch(addHistory({ action: INCREMENT, count: 1 }));
 };

 return <button onClick={handleClick}>+</button>;
};
export default IncrimenntButton;

write the following code into DecrementButton.jsx

import { useDispatch } from 'react-redux';
import { INCREMENT, addHistory, incriment } from '../store';

const IncrimenntButton = () => {
 const dispatch = useDispatch();

 const handleClick = () => {
  dispatch(incriment(1));
  dispatch(addHistory({ action: INCREMENT, count: 1 }));
 };

 return <button onClick={handleClick}>+</button>;
};
export default IncrimenntButton;

write the following code into History.jsx

import { useSelector } from 'react-redux';
const History = () => {
 const history = useSelector((state) => state.history);

 return (
  <div>
   {history.length > 0 ? (
    <h4>
     Histories:
     <ol>
      {history.map((item) => (
       <li key={item.id}>
        {item.action} - {item.time}
       </li>
      ))}
     </ol>
    </h4>
   ) : (
    <h4>There is no histories yet!</h4>
   )}
  </div>
 );
};
export default History;

write the following code into ClearHistory.jsx

import { useDispatch } from 'react-redux';
import { CLEAR_COUNT, addHistory, clearCount, clearHistory } from '../store';

const ClearHistory = () => {
 const dispatch = useDispatch();

 const handleClearHistory = () => {
  dispatch(clearHistory());
 };

 const handleClearCount = () => {
  dispatch(clearCount());
  dispatch(addHistory({ action: CLEAR_COUNT }));
 };

 return (
  <div>
   <button onClick={handleClearCount}>Clear Count</button>
   <button onClick={handleClearHistory}>Clear History</button>
  </div>
 );
};
export default ClearHistory;

now combines this into App.jsx

import './App.css';
import ClearHistory from './components/ClearHistory';
import Count from './components/Count';
import DecrimentButton from './components/DecrimentButton';
import History from './components/History';
import IncrimenntButton from './components/IncrimenntButton';

function App() {
 return (
  <>
   <Count />
   <div>
    <IncrimenntButton />
    <DecrimentButton />

    <ClearHistory />
   </div>

   <History />
  </>
 );
}

export default App;

That’s about it. We successfully added Redux to a React app.

If you would want to check over the code and give it a try, here is the Code Sandbox version.
Check Live

In Conclusion,

It may seem challenging at first to integrate Redux into your React application. But when we take each idea individually and work out the reasoning on our own, it becomes much easier.

I’m still trying to study these ideas on my own. Please don’t hesitate to point out any errors in my logic and the issues you run across.

I’m appreciative that you read my piece. Please remember to like and share the post with your fellow developers.

Step 1: Creating a GitHub repository

Step 2: Install gh-pages package as a dev-dependency

npm install gh-pages --save-dev
or
yarn add -D gh-pages

Step 3: Set the config

// add this line at your package.json file in first line
// change username and repository to yours
"homepage": "https://username.github.io/repository-name",

// add following two line to scripts on package.json file
"predeploy": "yarn build", // or, npm run build
"deploy": "gh-pages -d dist",

Now, go to your vite.config.js file and add

// change repository-name to yours
base: '/repository-name/',

Step 4: Push your project to GitHub repository

Step 5: Deploy

npm run deploy
or 
yarn deploy

Well done your react app is live now! 👏

To visit your app go to,
your repository > settings > pages > Here you will find live site link.
or directly, goto previously added homepage link to package.json file

if your site is not live immediately don’t be scared, to go live there may take a few minutes.

[‘👨’, ‘👩’].join([‘💘’]) // [‘👨💘👩’]
MDN reference

[‘😊’, ‘😎’].concat([‘😋’]) // [‘😊’, ‘😎’, ‘😋’]
MDN reference

[‘😊’, ‘😎’, ‘😋’].slice(2) // [‘😋’]
MDN reference

[‘😊’, ‘😎’, ‘😋’].splice(2, 0, ‘😍’) // [‘😊’, ‘😎’, ‘😍’, ‘😋’]
MDN reference

[‘😊’, ‘😎’, ‘😋’].indexOf(‘😎’) // 1
MDN reference

[‘😊’, ‘😎’, ‘😎’, ‘😋’].lastIndexOf(‘😎’) //2
MDN reference

[‘😊’, ‘😎’, ‘😋’].reverse() // [‘😋’, ‘😎’, ‘😊’]
MDN reference

[‘😊’, ‘😎’, ‘😋’].shift() // [‘😎’, ‘😋’]
MDN reference

[‘😊’, ‘😎’, ‘😋’].unshift(‘😏’) // [‘😏’, ‘😊’, ‘😎’, ‘😋’]
MDN reference

[‘😊’, ‘😎’, ‘😋’].push(‘😏’) // [‘😊’, ‘😎’, ‘😋’, ‘😏’]
MDN reference

[‘😊’, ‘😎’, ‘😋’].pop() // [‘😊’, ‘😎’]
MDN reference

[‘😊’, ‘😎’, ‘😋’].sort() //[‘😊’, ‘😋’, ‘😎’]
MDN reference

[‘😊’, ‘😎’, ‘😋’].fill(‘😎’, 1, 3) // [‘😊’, ‘😎’, ‘😎’]
MDN reference

[‘😀’, [‘😉’, ‘🥱’], [‘😛’, ‘😲’], [[[‘💰’]]]].flat(3) // [‘😀’, ‘😉’, ‘🥱’, ‘😛’, ‘😲’, ‘💰’]
MDN reference

[‘😊’, ‘😎’, ‘😋’].includes(‘😎’) // true
MDN reference

Thanks for reading ❤