https://leetcode.com/discuss/interview-question/742791/front-end-interview-questions https://leetcode.com/discuss/interview-experience/2072679/livspace-interview-questions-front-end-sde-1-my-journery-from-76lpa-to-27-lpa
- Implement a function that serializes a JavaScript value into a JSON string.
- Implement a function that performs a deep copy of a value, but also handles circular references.
- Implement a function that determines if two values are deep equal.
- Implement the functionality behavior of
Promise.any
. - Implement the functionality behavior of
Promise.allSettled
. - Implement a function that returns a memoized version of a function which accepts a single argument.
- Implement a function that deserializes a JSON string into a JavaScript value.
- Implement a class that can subscribe to and emit events that trigger attached callback functions.
- Implement a debounce function that comes with a cancel method to cancel delayed invocations.
- Implement a function that recursively flattens an array into a single level deep.
- Implement a
promisify
function that allows the original function to override the return value. - Implement a function to execute N async tasks in series.
- Implement a function to execute N async tasks in parallel.
- Implement a function to execute N async tasks in a race.
- Implement a
pipe
function which chains N number of functions. - Implement negative indexing in an Array using Proxies.
- Implement Lodash's
_.get
method which gets a value from the path. - Implement your custom version of the
call
method which sets the “this” context. - Implement throttling of promises which throttles API requests to a max limit.
- Implement memoizing or caching identical API requests.
- Implement a curried function with placeholder support.
- Implement a custom polyfill version of
Object.assign
. - Implement custom Virtual DOM I which serializes the data into valid JavaScript objects.
- Implement custom Virtual DOM II which deserializes the data.
- Implement a custom polyfill function
memoize
from the Lodash library. - Implement a custom String Tokenizer.
- Implement a custom function
_chunk()
which chunks arrays like in Lodash Library. - Implement the polyfills for the
call
,apply
, andbind
methods from scratch. - Implement a throttle function that comes with a cancel method to cancel delayed invocations.
- Write a custom polyfill for the
typeof
operator which returns the correcttypeof
for a JavaScript value.
- How does React's reconciliation algorithm (Fiber) work for efficient rendering?
- Explain the difference between
useState
anduseReducer
hooks in complex state management. - What is the purpose of
React.memo
and when should you use it? - How does the virtual DOM differ from the real DOM, and why is it faster?
- What is the significance of keys in React lists, and how do they affect rendering?
- Explain the concept of React’s Concurrent Mode and how it improves UI responsiveness.
- How do React hooks like
useEffect
prevent unnecessary re-renders and performance issues? - What is the purpose of Context API in React, and how does it avoid prop drilling?
- How do you implement code-splitting and lazy loading in React with
React.lazy
andSuspense
? - What are React fragments and why are they used over
div
containers? - Explain the difference between controlled and uncontrolled components in React forms.
- How would you prevent unnecessary component updates using
shouldComponentUpdate
orReact.PureComponent
? - Describe the role of
useRef
and how it differs fromcreateRef
in class components. - What is the purpose of
forwardRef
in React, and how is it used to pass refs to child components? - How does React handle asynchronous rendering, and what is its impact on user experience?
- Explain how to handle memory leaks and clean up effects in React using
useEffect
hooks. - How do you optimize performance in large React applications using tools like React Profiler?
- How does React's error boundary feature work, and what are its limitations?
- What is
useCallback
anduseMemo
, and how do they help in performance optimization? - How would you handle deep updates in nested state using React without causing performance bottlenecks?
- If we are dealing with a user-intensive application, it's good to use lazy loading techniques for better performance.
- To prevent blocking of the UI thread, we should consider using Web Workers. Remember about its drawbacks.
- For responsive design, consider using a mobile-first approach with media queries.
- If the system requires a complex UI with a lot of user interaction, consider using a frontend framework like React, Angular, or Vue.
- If you need to handle and maintain the state of the application efficiently, consider using state management libraries like Redux or Mobx.
- To make the website accessible, ensure proper use of ARIA attributes and semantic HTML.
- If the application requires real-time data updates, consider using Websockets or Server-Sent Events.
- If the system requires seamless navigation between different parts of the application, consider using client-side routing.
- For optimizing large lists or tables in the UI, consider using techniques like windowing.
- To deal with form validation and data collection, consider using libraries like Formik or react-hook-form.
- If the system has a component-based architecture, ensure proper component composition.
- If the system needs to store data in the client-side, we should consider using Cookies, Local Storage, or IndexedDB based on the use case.
- To reduce the initial load time of the application, implement code splitting.
- If the application needs to work offline, implement a service worker and build a Progressive Web App (PWA).
- For efficient error handling, use a centralized error handling system.
- When dealing with APIs, consider using GraphQL for efficient data retrieval.
- If the system requires frequent style changes based on props, consider CSS-in-JS libraries.
- If the system has multiple similar components, consider using higher-order components or render props for code reusability.
- If the system needs to be SEO-friendly, implement server-side rendering (SSR) or pre-rendering.
- For large scale applications, use a monorepo structure for easy package management.
- When dealing with asynchronous data, consider using Promises or async/await for better code readability and error handling.
- For handling complex animations, consider using libraries like Framer Motion or React Spring.
- If the application needs to support multiple themes, consider context API and CSS variables.
- If the application needs to support internationalization, consider libraries like i18next.
- To ensure the performance of the application, make sure to use the browser's Performance API.
- For testing components and business logic, consider using libraries like Jest and React Testing Library.
- To enforce code style and prevent bugs, consider using linters and formatters like ESLint and Prettier.
- To ensure your frontend is accessible to all users, you should follow WCAG guidelines and use tools for checking accessibility compliance.
- For maintaining code quality and enforcing coding standards, use static type checkers like TypeScript and linters such as ESLint.
- Consider implementing state management libraries like Redux or Context API for predictable state management in complex applications with many components
- If your application deals with real-time data, consider using WebSockets or libraries such as Socket.IO for real-time, bidirectional communication between the client and the server.
- For managing side effects in your application, libraries like Redux-Thunk or Redux-Saga can be considered.
- If your application requires routing, libraries like React-Router can help manage different views for your app.