How to implement Queue data structure in the ReactJS ?
Last Updated :
30 Nov, 2023
We'll explore the implementation of a basic queue data structure in a React application using the "rooks" library. Queues are fundamental in computer science and find applications in various scenarios, including task scheduling, handling requests, and managing data flow.
Prerequisites:
Approach:
This React component uses the useQueueState hook from the "rooks" library to manage a queue of numbers.
- The
numberToPushRef is a useRef that keeps track of the number to be pushed into the queue. - The
addToQueue function increments the value in numberToPushRef and enqueues the updated value. - The UI includes buttons for enqueueing and dequeuing, displaying the front element, and showing the length of the queue.
- Styling is applied using inline styles for simplicity.
Steps to Create the React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-application demo
Step 2: After creating your project folder i.e. demo, move to it using the following command:
cd demo
Step 3: Install Rooks from npm.
npm i rooks
Project Structure:
Project StructureThe updated dependencies in package.json file will look like:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rooks": "^7.14.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}Example: In this example, we'll implement the data structure queue in the React JS:
JavaScript
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
import React, { useRef } from "react";
import { useQueueState } from "rooks";
export default function App() {
const numberToPushRef = useRef(3);
const [list, { enqueue, dequeue, peek,
length }] = useQueueState([1, 2, 3]);
function addToQueue() {
numberToPushRef.current =
numberToPushRef.current + 1;
enqueue(numberToPushRef.current);
}
return (
<>
<h1 style={{ color: 'blue', margin: '20px' }}>Queue</h1>
<div style={{
display: 'flex',
flexDirection: 'horizontal',
width: '400px',
height: '60px',
fontSize: '20px',
margin: '20px',
borderTop: '2px solid green',
borderBottom: '2px solid green'
}}>
{list.map((item) => {
return <div style={{
width: '30px',
height: '30px',
background: '#a3fc9d',
borderRadius: '5px',
margin: '10px',
textAlign: 'center'
}}
key={item}>{item}</div>;
})}
</div>
<button style={{
margin: '20px',
background: '#f69dfc',
width: '200px',
borderRadius: '5px'
}}
onClick={addToQueue}>enqueue</button>
<button style={{
margin: '20px',
background: '#f69dfc',
width: '200px',
borderRadius: '5px'
}}
onClick={dequeue} warning>
dequeue
</button>
<p style={{
color: '#e84917',
fontSize: '20px',
margin: '20px'
}}>Front Element : {peek()}</p>
<p style={{
color: '#175ce8',
fontSize: '20px',
margin: '20px'
}}>Length of Queue : {length}</p>
</>
);
}
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000
Output
Similar Reads
Implement Stack Data Structure using ReactJS To implement Stack Data Structure using React JS and display it on the application. we will use the npm rooks package to create stack and its functionalities. PrerequisitesReact JSReact JS hooksApproach to Implement Stack in ReactJsTo implement the stack we will use a custom hook, i.e. the useStackS
2 min read
How to Implement Gantt Chart in ReactJS? Gantt charts are used to visualize project schedules, timelines, and dependencies. In ReactJS, implementing a Gantt chart involves integrating libraries like dhtmlx-gantt or react-google-charts and structuring task data with start dates, durations, and progress indicators. PrerequisitesNPM & Nod
3 min read
How to Implement Webhooks in React ? To implement webhooks in React JS, you first need to set up a backend server to handle incoming webhook requests. This server should have endpoints to receive and process webhook data. Then, in your React application, you can use libraries like Axios or the native fetch API to send HTTP POST request
4 min read
How to Implement Caching in React Redux applications ? Caching is the practice of storing frequently used or calculated data temporarily in memory or disk. Its main purpose is to speed up access and retrieval by minimizing the need to repeatedly fetch or compute the same information. By doing so, caching helps reduce latency, conserve resources, and ult
3 min read
How to Use Flux to Manage State in ReactJS? State management in ReactJS is important for building dynamic and responsive applications. Flux, an architecture for managing state, provides a structured approach to handle data flow and state changes efficiently in React applications. In this article, we will explore the Flux to Manage State in Re
5 min read
How to store single cache data in ReactJS ? Storing Data in a cache is an important task in web applications. We can cache some data into the browser and use it in our application whenever needed. Caching is a technique that helps us to store a copy of a given resource in our browser and serve it back when requested. PrerequisitesReact JSCach
2 min read