Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

Implement Stack Data Structure using ReactJS

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

In this article, let’s see how we can implement a stack in the ReactJS application.

Approach: To implement the stack we will use a custom hook, i.e. the useStackState hook provided by the Rooks package for React. It manages the state in the form of a stack. It takes an array as an argument and returns array items containing list, listInReverse, and object with attributes push, pop,  peek, and length.

Below is the step-by-step implementation of the above approach:

Modules Required:

  • npm
  • create-react-application

Creating 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

Open the src folder and delete the following files:

  • logo.svg
  • setupTests.js
  • App.test.js
  • index.css
  • reportWebVitals.js
  • App.cs

Project Structure: The project should look like this:


Example: The below example will illustrate the Data structure stack implementation in the React JS


import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
        <App />


import React, { useRef } from "react";
import { useStackState } from "rooks";
export default function App() {
    const numberToPushRef = useRef(3);
    const [list, { push, pop, peek, length }, 
        listInReverse] = useStackState([1, 2, 3]);
    function addToStack() {
        numberToPushRef.current = numberToPushRef.current + 1;
    return (
            <h1 style={{ color: 'blue', margin: '20px' }}>
            <div style={{
                display: 'block',
                fontSize: '20px',
                margin: '20px'
                { => {
                    return <div style={{
                        width: '30px',
                        height: '30px',
                        background: '#a3fc9d',
                        borderRadius: '5px',
                        margin: '10px',
                        textAlign: 'center'
            <button style={{
                margin: '20px',
                background: '#f8e1ee',
                width: '200px',
                borderRadius: '5px',
                padding: '10px'
            <button style={{
                margin: '20px',
                background: '#bbfdd8',
                width: '200px',
                borderRadius: '5px',
                padding: '10px'
                onClick={pop} warning>
            <p style={{
                color: '#e84917',
                fontSize: '20px',
                margin: '20px'
            }}>Top Element : {peek()}</p>
            <p style={{
                color: '#175ce8',
                fontSize: '20px',
                margin: '20px'
            }}>Stack Size : {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/, you will see the following output:


My Personal Notes arrow_drop_up
Last Updated : 26 Jun, 2022
Like Article
Save Article
Similar Reads
Related Tutorials