Memoize Expensive Computation

Memoize Expensive Computation

Medium ReactJS Performance & Patterns 31 views
Explanation Complexity

Problem Statement

Calculate heavy derived data once per input change using useMemo.

Input Format

No input.

Output Format

Render a React component.

Constraints

Avoid expensive work on every render.

Input / Output Format

Input Format
No input.
Output Format
Render a React component.
Constraints
Avoid expensive work on every render.

Examples

Input:
Output:
(React code)

Example Solution (Public)

ReactJS 
import React, { useMemo, useState } from 'react';

function heavyScore(text) {
  let score = 0;
  for (let i = 0; i < 80000; i++) {
    const c = text.charCodeAt(i % (text.length || 1));
    score = (score + c * 17 + i) % 100000;
  }
  return score;
}

export default function App() {
  const [text, setText] = useState('meetcode');

  const score = useMemo(() => heavyScore(text), [text]);

  return (
    <div style={{ padding: 16, width: 520 }}>
      <h2 style={{ marginTop: 0 }}>Derived score</h2>
      <input value={text} onChange={(e) => setText(e.target.value)} style={{ width: '100%', padding: '10px 12px', borderRadius: 12, border: '1px solid #bbb' }} />
      <div style={{ marginTop: 10, color: '#555' }}>Score: {score}</div>
    </div>
  );
}

Official Solution Code

import React, { useMemo, useState } from 'react';

function heavyScore(text) {
  let score = 0;
  for (let i = 0; i < 80000; i++) {
    const c = text.charCodeAt(i % (text.length || 1));
    score = (score + c * 17 + i) % 100000;
  }
  return score;
}

export default function App() {
  const [text, setText] = useState('meetcode');

  const score = useMemo(() => heavyScore(text), [text]);

  return (
    <div style={{ padding: 16, width: 520 }}>
      <h2 style={{ marginTop: 0 }}>Derived score</h2>
      <input value={text} onChange={(e) => setText(e.target.value)} style={{ width: '100%', padding: '10px 12px', borderRadius: 12, border: '1px solid #bbb' }} />
      <div style={{ marginTop: 10, color: '#555' }}>Score: {score}</div>
    </div>
  );
}
Please login to submit solutions.
Editor
Output

                                        

                                    

                                    

                                        

                                                                                    
Please login to submit solutions.