Optimizing React-Scan Code For Efficient Highlighting And Resizing
React-Scan code review: `createHighlightCanvas` creates a canvas for highlighting elements, handling resize events & updating canvas dimensions. Cleanup involves removing duplicate resize listeners to avoid memory leaks.
In this article, we will review the below code snippet from react-scan source code.
export const createHighlightCanvas = (root: HTMLElement) => {
highlightCanvas = document.createElement('canvas');
highlightCtx = highlightCanvas.getContext('2d', { alpha: true });
if (!highlightCtx) return null;
const dpr = window.devicePixelRatio || 1;
const { innerWidth, innerHeight } = window;
highlightCanvas.style.width = `${innerWidth}px`;
highlightCanvas.style.height = `${innerHeight}px`;
highlightCanvas.width = innerWidth * dpr;
highlightCanvas.height = innerHeight * dpr;
highlightCa...