React Fundamentals Flashcards
These questions cover a broad spectrum of React concepts and practices that are commonly tested during interviews.
What is React?
React is a JavaScript library for building user interfaces, particularly single-page applications where you can create reusable UI components. It was developed by Facebook and is maintained by a large community of developers.
What are components in React?
Components are the building blocks of a React application. They allow developers to split the UI into independent, reusable pieces. Components can be either class-based (using ES6 classes) or functional (using JavaScript functions).
What is the difference between state and props?
State: A local data storage that is mutable, i.e., it can be changed over time. State is used to manage the dynamic data within a component.
Props: Short for properties, props are read-only and used to pass data from one component to another, usually from a parent to a child component.
What are React hooks?
Hooks are special functions introduced in React 16.8 that let you use state and other React features in functional components. The most commonly used hooks are useState and useEffect.
What is the useState hook?
The useState hook allows you to add state to functional components. It returns an array with two elements: the current state and a function to update that state.
const [count, setCount] = useState(0);
What is the useEffect hook?
The useEffect hook lets you perform side effects in functional components, like data fetching, subscriptions, or manually changing the DOM. It can be considered similar to lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount in class components.
useEffect(() => {
document.title = You clicked ${count} times;
}, [count]); // Dependency array controls when useEffect runs
What are controlled and uncontrolled components?
Controlled Components: Components where form data is handled by the React component’s state.
Uncontrolled Components: Components that store their own state internally, rather than relying on React state.
What is React context?
React Context provides a way to pass data through the component tree without having to pass props down manually at every level. It is used for global state management, similar to Redux or other state management libraries.
What is Redux, and how does it relate to React?
Redux is a state management library often used with React to manage complex application states. It uses a central store to hold the application’s state and allows components to access and update the state in a predictable way using actions and reducers.
What is the Virtual DOM, and how does React use it?
The Virtual DOM is a lightweight copy of the actual DOM. React uses it to optimize updates and rendering. When the state of an object changes, React updates the Virtual DOM instead of the real DOM directly. It then compares the Virtual DOM with a snapshot of the previous Virtual DOM and applies only the differences (a process called “reconciliation”).
What is JSX?
JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows developers to write HTML-like syntax within JavaScript code. JSX makes it easier to write and visualise UI components.
What is the difference between componentDidMount and useEffect?
componentDidMount is a lifecycle method used in class components to run code after the component mounts.
useEffect is used in functional components to achieve similar behaviour. useEffect can run on every render by default, but with a dependency array, it can be configured to run only on mount, update, or unmount.
How do you optimise React applications?
React applications can be optimised by:
- Using React.memo to prevent unnecessary re-renders.
- Splitting components with React.lazy and Suspense.
- Using useCallback and useMemo hooks to memoize functions and values.
- Implementing pagination or infinite scroll for large data sets.
- Avoiding anonymous functions in render methods to prevent re-creating them on every render.
What are React fragments?
React Fragments allow you to group multiple elements without adding an extra node to the DOM. It is written as <React.Fragment></React.Fragment> or simply <> </>.
return (
<>
<h1>Title</h1>
<p>Description</p>
</>
);
What is Prop Drilling and how do you avoid it?
Prop Drilling is the process of passing data from a parent component to deeply nested child components through props. It can make the codebase difficult to maintain. Context API or state management libraries like Redux can help avoid prop drilling by providing a central store for shared state.
