React Flashcards
What is React and why is it popular?
React is a JavaScript library developed by Facebook for building user interfaces, especially for single-page applications. It’s popular because of its component-based architecture, efficient rendering using the virtual DOM, and flexibility to integrate with various backends.
Explain the virtual DOM and its significance in React.
The virtual DOM is an in-memory representation of the real DOM. Instead of making direct changes to the actual DOM, React updates the virtual DOM. This allows React to determine the most efficient way to make changes to the actual DOM by comparing the current virtual DOM with the next version, a process called “reconciliation.” This results in faster and more efficient updates.
What is JSX in React? How is it different from HTML?
JSX (JavaScript XML) is a syntax extension for JavaScript used in React to describe UI components. While it resembles HTML, it allows for the embedding of JavaScript expressions. JSX produces React elements, whereas HTML produces browser DOM elements. In JSX, properties and methods are camelCased rather than lowercased as in HTML.
How do you create a React component?
A React component can be created using a class or a function. The component returns a React element, typically written in JSX, which defines how the component should appear. Each component should also include a ‘render’ method when using class components.
What is the purpose of the render method in a React component?
The render method specifies the UI output of a React component. It returns a single React element (either a native DOM element or another component) that represents the component’s visual representation.
What is the significance of state in React?
State in React represents the data that can change over time within a component. It determines the component’s behavior and rendering. Whenever state changes, the component re-renders to reflect those changes.
What is a functional component in React?
A functional component is a simpler way to write a React component. It’s just a JavaScript function that returns a React element. Unlike class components, functional components don’t have a ‘render’ method and don’t manage their own state or lifecycle methods without hooks.
How do you pass data from a parent component to a child component?
Data is passed from a parent component to a child component through “props”. The parent component defines the props for the child component, and the child accesses them as arguments to its function or through ‘this.props’ in class components.
Explain the concept of props in React.
Props (short for “properties”) are a way of passing data from parent to child components in React. They are read-only and help to make components reusable by giving components the ability to receive data from its parent component.
What is React’s key principle for optimizing performance?
React’s key principle for optimizing performance is its use of the virtual DOM and the reconciliation process. By updating only what’s necessary in the real DOM, based on differences between the current virtual DOM and the next version, React ensures efficient and optimal rendering.
What are controlled components in React?
Controlled components in React are form elements like input, textarea, and select where the value of the element is controlled by the React state. This means the element’s value is set by the component’s state and can be modified by event handlers.
What is the purpose of the useState hook in React?
The useState hook allows functional components to use state. It returns an array where the first element is the current state value, and the second element is a function to update that state. It provides a way to add state management functionality to functional components without converting them to class components.
How do you handle events in React?
In React, events are handled using event handlers, which are JavaScript functions. These handlers can be passed as props to child components or used directly in components. React’s event system is synthetic, meaning it wraps around the browser’s native event system, providing a consistent API across browsers.
Describe the component lifecycle methods in React.
In React, class components have lifecycle methods that get executed at various stages of a component’s life, such as mounting, updating, and unmounting. Key methods include: componentDidMount, shouldComponentUpdate, componentDidUpdate, and componentWillUnmount.
Explain the difference between componentDidMount and useEffect.
componentDidMount is a lifecycle method in class components that runs after the component output is rendered to the DOM. useEffect is a hook in functional components that can mimic the behavior of various lifecycle methods, including componentDidMount, depending on its dependency array. If the dependency array is empty, useEffect acts like `componentDidMount
What is Redux, and how does it work with React?
Redux is a state management library often used with React. It provides a centralized store for state that every component can access. React components interact with the store by dispatching actions and subscribing to state changes. Redux ensures consistent state management with principles like immutability and pure reducer functions.
What is routing in React, and how can you implement it?
Routing in React allows navigation between different components based on the URL path. React Router is a popular library for implementing routing in React apps. With React Router, you can define Route components that specify which component should be rendered for different paths.
What is the significance of keys in React when rendering lists?
Keys are special string attributes you need to include when creating lists of elements in React. They help React identify which items have changed, are added, or are removed, optimizing the rendering by reusing existing components.
How do you make AJAX requests in React?
In React, AJAX requests can be made using browser built-in methods like fetch or third-party libraries like axios. AJAX calls are often placed in lifecycle methods (like componentDidMount in class components) or hooks (like useEffect in functional components) to fetch data after a component is rendered.
What is Redux Thunk, and why is it used?
Redux Thunk is middleware for Redux that allows you to write action creators that return a function instead of an action object. This is useful for handling asynchronous actions, such as API calls. Thunks can be used to delay the dispatch of an action or to dispatch only under certain conditions.
Describe the concept of context in React and how it can be useful.
Context in React provides a way to pass data through the component tree without having to pass props manually at every level. It’s useful when you have global data that many components need access to, like themes or user authentication.
Explain the purpose of the useReducer hook in React.
The useReducer hook in React provides a more structured way to manage state in functional components. It’s often used for state logic that is more complex than what useState can handle. It takes a reducer function and an initial state as arguments and returns the current state and a dispatch method.
What are Higher Order Components (HOCs) in React?
HOCs are a pattern in React where a function takes a component and returns a new component with additional props or behavior. They are useful for reusing component logic and can be thought of as “component factories.”
What is server-side rendering (SSR) in React? Why is it beneficial?
SSR means rendering React components on the server rather than the client. This generates a full page HTML for the initial load, improving initial load performance and SEO, as search engines can crawl the fully rendered page.
