Describe a practical scenario where using a WeakMap would be beneficial in a React application. Explain why a WeakMap is preferred over a regular Map in this scenario.
React JS interview question for Advanced practice.
Answer
A practical scenario in React is caching calculated data that is expensive to compute, where the data is associated with a specific component instance's props object. For example, you might want to cache the result of a complex data transformation based on the props. javascript // A WeakMap to cache results, keyed by the props object const propsCache = new WeakMap(); function MyComponent(props) { if (propsCache.has(props)) { return propsCache.get(props); // Return cached result } // Expensive calculation based on props const transformedData = someExpensiveCalculation(props.data); const result = <div{transformedData}</div; propsCache.set(props, result); // Cache the result return result; } A WeakMap is preferred here because its keys (the props objects) are held weakly. When a component unmounts and is no longer rendered, its props object is no longer referenced anywhere else. The garbage collector can then reclaim the memory for that props object, and the WeakMap will automatically remove the corresponding entry from the cache. If you used a regular Map, it would maintain a strong reference to every props object it has ever seen. This would prevent the old props objects from being garbage collected, even after their components have unmounted, leading to a memory leak that grows over time as the application is used.
Explanation
WeakMaps are crucial for preventing memory leaks in front-end frameworks when associating state with objects whose lifecycle is managed by the framework.