Implement fibonacci series function using memoisation.

Q: Implement fibonacci series function using memoisation.

import React, { useState, useMemo } from 'react'; function FibonacciCalculator({ n }) { // Define a function to calculate the nth Fibonacci number const calculateFibonacci = (n) => { if (n calculateFibonacci(n), [n]); return ( The {n}th Fibonacci number is: {result} ); } function App() { const [n, setN] = useState(0); return ( setN(parseInt(e.target.value))} /> ); } export default App;

Difficulty: 5/10

memoization, React hooks, performance optimization

javascript

Scenario Questions

0-2 years experience

1We need a simple React component that shows the 10th Fibonacci number. How would you write the function using memoization so it only computes each value once?
2If you forget to include a dependency array in useMemo for the Fibonacci calculation, what will happen when the component re‑renders?

2-5 years experience

1Your team added an input where users can type N and see the Nth Fibonacci number. The UI becomes sluggish for large N. Walk me through how you would refactor the code using memoization to fix the performance issue.

Follow-up Questions

Can you show how the cache is stored and accessed inside the component?
What would you change if the component re‑renders on every keystroke?
How would you test that memoization actually reduces the number of calculations?