5–8 years · Senior — React · JavaScript / TypeScript · State management · CSS · Performance · Accessibility
Analyses the bundle with tools like Webpack Bundle Analyzer; checks for tree-shakable imports versus entire library imports; evaluates alternatives to the library that may be lighter; considers code-splitting to load components on demand; looks into optimising CSS and assets as well.
What would you check if the bundle size increase is due to dependencies rather than direct imports?
Uses React DevTools to profile renders; checks if props are changing unnecessarily; implements React.memo for functional components; considers using useCallback and useMemo for functions and values passed as props; reviews context usage to avoid unnecessary re-renders.
What changes if the parent component is a class component?
Ensures the modal has a role of 'dialog' with proper aria-labelledby; uses focus management to set focus on the modal upon opening; implements an escape key handler to close the modal; verifies background elements are not focusable when the modal is active; tests with screen readers.
How do you ensure that focus returns to the correct element after the modal is closed?
Identifies performance bottlenecks using the React Profiler; checks for unnecessary re-renders and optimises components with memoization; analyses event handling to reduce processing time; evaluates network requests and lazy loading strategies; considers using Web Workers for heavy computations.
You find several components re-rendering unnecessarily. What specific techniques do you employ to prevent this?
Conducts an accessibility audit using tools like axe or Lighthouse; reviews the semantic HTML structure for appropriate use of ARIA roles and properties; ensures all interactive elements are keyboard navigable; tests with actual screen readers for real-world usability; develops a checklist for future components to ensure ongoing compliance.
You identify some components that are still not compliant. What specific changes would you implement to rectify these?
Analyses the current component for single responsibility violations; identifies reusable parts and splits them into smaller components; implements hooks for shared logic; documents component interactions and props; ensures that new components have clear boundaries and follow best practices for props and state management.
During refactoring, you realise some components need to remain in place for legacy support. How do you balance new designs with maintaining legacy code?
Load six more — you will get questions you have not seen first.
Give me six more →Say your answer out loud before revealing. Reading the answer first feels like learning and is not.