Create a component that uses useMemo to optimize the rendering of a list of items by sorting them only when necessary.

Medium

Problem Statement

Sample Input

Initial list: [4, 2, 9, 1]

Sample Output

A sorted list is displayed only when the user clicks the 'Sort' button.

Limits

Time: 2s · Memory: 256 MB

Code Editor

00:00

Try your code in this preview. Submit marks it done.

import React, { useState, useMemo } from "react";
 
 const OptimizedSort = () => {
  return (
  <div>
  <button>Sort</button>
  <ul>
  {/* Render sorted items */}
  </ul>
  </div>
  );
 };
 
 export default OptimizedSort;

Open Sandbox

Programming Exercises

Create a component that uses useMemo to optimize the rendering of a list of items by sorting them only when necessary.

Problem Statement

Sample Input

Sample Output

Limits

Hint 1