React In-Depth Flashcards
These advanced questions explore React's core functionalities, design patterns, and performance optimisations, which are essential for more senior or in-depth front-end interviews.
What is the difference between class components and functional components?
Class Components:
Older way of defining components using ES6 classes. They can hold and manage state using this.state and have lifecycle methods (componentDidMount, componentDidUpdate, etc.).
Functional Components:
Introduced as stateless components but, with React Hooks, they can now manage state and side effects. Functional components are typically simpler, more readable, and easier to test.
What is reconciliation in React?
Reconciliation is the process React uses to determine how to efficiently update the UI to match the latest changes. When a component’s state or props change, React compares the Virtual DOM with the previous version to figure out the minimal set of changes required to update the real DOM. This process involves algorithms like “diffing.”
What are pure components in React?
A pure component is a class component that implements shouldComponentUpdate with a shallow comparison of its props and state. If the props or state haven’t changed, React skips rendering the component. Functional components can achieve similar behavior by wrapping them with React.memo.
class MyComponent extends React.PureComponent {
render() {
return <div>{this.props.value}</div>;
}
}
What is the useReducer hook?
The useReducer hook is an alternative to useState for managing more complex state logic in functional components. It takes a reducer function and an initial state and returns the current state along with a dispatch function for triggering state updates.
const [state, dispatch] = useReducer(reducer, initialState);
What is server-side rendering (SSR) in React?
Server-side rendering refers to rendering React components on the server instead of the client, and then sending the fully rendered HTML to the client. This can improve performance and SEO. Frameworks like Next.js facilitate SSR in React.
What are the different lifecycle methods in class components?
Mounting: constructor(), componentDidMount()
Updating: componentDidUpdate(), shouldComponentUpdate()
Unmounting: componentWillUnmount()
Error Handling: componentDidCatch(), getDerivedStateFromError()
What is the useRef hook, and how is it used?
The useRef hook allows you to persist values across renders without causing a re-render when updated. It is commonly used to reference DOM elements directly and manipulate them without triggering a new render cycle.
const inputRef = useRef(null);
function focusInput() {
inputRef.current.focus();
}
How does React handle forms and form validation?
React provides controlled components where form inputs are bound to the component’s state. For validation, developers can either handle it manually by checking form fields within the component, or use libraries like Formik or React Hook Form for more complex validation logic.
const [value, setValue] = useState(‘’);
const handleChange = (e) => setValue(e.target.value);
What are lazy loading and code splitting in React?
Lazy loading is the practice of loading parts of your application only when they are needed, which helps improve performance by reducing the initial bundle size. React supports lazy loading of components through React.lazy and Suspense. Code splitting refers to splitting your code into smaller chunks to load them dynamically, typically using webpack and tools like React.lazy.
const LazyComponent = React.lazy(() => import(‘./MyComponent’));
What is the difference between useEffect and useLayoutEffect?
useEffect:
Runs after the render has been committed to the screen. This is suitable for most side effects like data fetching and subscriptions.
useLayoutEffect:
Runs synchronously after all DOM mutations but before the browser has a chance to paint. It is used when you need to make DOM measurements or changes and have them visible immediately (e.g., when dealing with animations or layout).
How can you prevent unnecessary re-renders in React?
You can prevent unnecessary re-renders in React by:
- Using React.memo to memoize functional components.
- Implementing shouldComponentUpdate in class components.
- Using useCallback to memoize event handlers and prevent re-creating functions.
- Using useMemo to memoize expensive calculations.
- Avoiding prop and state changes that do not affect rendering.
What is the difference between React.createElement() and JSX?
React.createElement() is the function that JSX is compiled into behind the scenes. It creates a React element, which is an object representation of a DOM node. JSX is a syntactic sugar that makes writing UI more intuitive and readable, but both serve the same purpose.
// JSX
const element = <h1>Hello, world!</h1>;
// Equivalent React.createElement
const element = React.createElement(‘h1’, null, ‘Hello, world!’);
What are the advantages of using TypeScript with React?
TypeScript provides static typing for JavaScript, which helps catch potential errors at compile time, leading to more robust and maintainable code. With React, TypeScript offers:
- Strong type-checking for components and props.
- Better IDE support with code autocompletion and refactoring.
- Easier collaboration and scaling of codebases due to explicit types.
What are the potential issues with using index as a key in React?
Using an index as a key in React can lead to performance issues and unexpected bugs. If the order of items changes, React may not properly update the list since keys are used to track items between renders. This can result in incorrect UI rendering, especially for dynamic lists.
What are higher-order functions in React?
Higher-order functions in React refer to functions that take other functions or components as arguments and return a new function or component. This pattern is commonly used for reusing component logic. A higher-order component (HOC) is a type of higher-order function.
