Implementing LRU Cache in React JS with Tutorial 🚀🚀 #reactjs #javascript #reactjstutorial

LRU (Least Recently Used) Cache is a popular algorithm used in computer science to manage the caching mechanism efficiently. In this tutorial, we’ll implement an LRU Cache in React JS to store data and quickly retrieve it when needed.

Step 1: Setting up the project
To get started, create a new React project using Create React App or any other method of your choice. Once the project is set up, open your terminal and navigate to the project directory. Install the required dependencies by running the following command:

npm install lodash

Step 2: Implementing the LRU Cache
Create a new file in your source directory, let’s name it LruCache.js. In this file, we’ll define our LRU Cache class.

import _ from 'lodash';

class LRUCache {
  constructor(capacity) {
    this.capacity = capacity;
    this.cache = new Map();
  }

  get(key) {
    if (this.cache.has(key)) {
      const val = this.cache.get(key);
      this.cache.delete(key);
      this.cache.set(key, val);
      return val;
    }
    return -1;
  }

  put(key, value) {
    if (this.cache.has(key)) {
      this.cache.delete(key);
    } else if (this.cache.size >= this.capacity) {
      const oldestKey = _.first(Array.from(this.cache.keys()));
      this.cache.delete(oldestKey);
    }
    this.cache.set(key, value);
  }
}

In this class, we define two methods: get and put. The get method retrieves the value from the cache if it exists, otherwise returns -1. The put method inserts a new key-value pair into the cache, and if the cache exceeds its capacity, it removes the least recently used key.

Step 3: Using the LRU Cache in React components
Now that we have our LRU Cache implementation ready, we can use it in our React components. Let’s create a simple example to demonstrate its usage.

import React, { useState } from 'react';
import LRUCache from './LRUCache';

const App = () => {
  const [cache, setCache] = useState(new LRUCache(2));
  const [value, setValue] = useState('');

  const handleGetValue = () => {
    const key = document.getElementById('key').value;
    const val = cache.get(key);
    setValue(val);
  };

  const handlePutValue = () => {
    const key = document.getElementById('key').value;
    const value = document.getElementById('value').value;
    cache.put(key, value);
    setValue('');
  };

  return (
    <div>
      <input id="key" type="text" placeholder="Key" />
      <input id="value" type="text" placeholder="Value" />
      <button onClick={handleGetValue}>Get Value</button>
      <button onClick={handlePutValue}>Put Value</button>
      <p>Value: {value}</p>
    </div>
  );
};

export default App;

In this example, we create a simple React component App that allows users to input a key-value pair, either get the value from the cache or put a new value into the cache. The LRU Cache is initialized with a capacity of 2.

Step 4: Testing the LRU Cache
To test the LRU Cache implementation, start your React application by running npm start in the terminal. Open the application in your browser, and you should see the input fields for key and value, along with buttons to Get Value and Put Value.

Enter a key-value pair and click Put Value. Then enter the key and click Get Value to retrieve the value from the cache. You can try adding more key-value pairs to test the cache eviction policy when the capacity is reached.

That’s it! You have successfully implemented an LRU Cache in React JS. Feel free to customize and expand on this example based on your requirements. Happy coding! 🔥🚀 #reactjs #javascript #reactjstutorial