General Flashcards
What is React.js, and what problem does it solve in web development?
React.js is an open-source JavaScript library for building user interfaces and single-page applications. It solves several problems in web development, including complex UIs, efficient updates, data flow management, component reusability, and a strong community and ecosystem.
Explain the concept of “virtual DOM” in React and how it improves performance.
The virtual DOM is a lightweight copy of the actual DOM in a web application. When changes occur in a React application, React first updates the virtual DOM, then compares it to the real DOM, and finally updates only the parts of the real DOM that have changed. This process reduces direct manipulation of the DOM, leading to improved performance and faster UI updates.
What is JSX in React, and why is it used?
JSX (JavaScript XML) is a syntax extension in React that allows you to write HTML-like code within JavaScript. JSX makes it easier to define and render React components, improving code readability and maintainability.
How do you create a functional component in React?
You create a functional component in React by defining a JavaScript function that returns JSX.
What is a class component in React, and how does it differ from a functional component?
Class components in React are created using JavaScript classes that extend React.Component. They can manage local state and have access to lifecycle methods. Functional components, on the other hand, are defined as JavaScript functions and traditionally didn’t manage state or have access to lifecycle methods. However, with the introduction of hooks, functional components can now manage state and handle side effects, blurring the distinction between the two.
How can you pass data from a parent component to a child component in React?
You can pass data from a parent component to a child component in React by using props. Props (short for properties) are attributes that you can attach to a component when you use it. The parent component passes data to the child component by setting props on the child component when rendering it.
What is the purpose of the setState method in React, and why is it important?
The setState method in React is used to update a component’s local state. It’s important because it triggers a re-render of the component when the state changes, ensuring that the UI reflects the updated state. It also helps maintain a predictable data flow in a React application.
What are props in React, and how are they used to pass data between components?
Props (short for properties) in React are a way to pass data from a parent component to a child component. They are read-only and help create dynamic and reusable components. Props are defined as attributes in the JSX when rendering a component and are accessed as an object within the child component.
Explain the lifecycle methods in React. Name a few key lifecycle methods and their purposes.
React lifecycle methods are special methods that automatically get called at various points in a component’s lifecycle. Some key lifecycle methods include:
componentDidMount: Called after the component is rendered to the DOM. Used for side effects like data fetching.
componentDidUpdate: Called after a component’s state or props change. Used for reacting to changes in the component.
componentWillUnmount: Called before a component is removed from the DOM. Used for cleanup operations.
What is Redux, and why might you use it in a React application?
Redux is a state management library for JavaScript applications, often used with React. It provides a centralized store to manage application state, making it easier to manage and share data between different parts of a React application, especially in larger and more complex applications.
How does React Router help with client-side routing in a React application?
React Router is a library for managing routing and navigation in a React application. It allows you to define different “routes” in your application and render specific components when the URL matches those routes. This enables client-side navigation without full page refreshes, creating a smoother user experience in single-page applications.
What are hooks in React, and why were they introduced?
Hooks are functions that allow functional components to “hook into” React state and lifecycle features. They were introduced to functional components in React 16.8 to provide a more direct API for managing state and side effects, making functional components more powerful and easier to work with.
What is the significance of the useEffect hook in React, and when would you use it?
The useEffect hook in React is used for handling side effects in functional components. It allows you to perform actions like data fetching, DOM manipulation, or subscribing to external data sources. You would use it when you need to run code in response to component updates, similar to componentDidMount, componentDidUpdate, and componentWillUnmount in class components.
How can you optimize performance in a React application?
Performance optimization in React can be achieved through various techniques such as:
Memoization and memoization libraries like React.memo.
Code splitting to load only necessary code when needed.
Using the shouldComponentUpdate method or PureComponent for class components.
Employing PureComponent or memoization for functional components.
Implementing lazy loading for components.
Properly using keys when rendering lists to aid React in identifying changes.
What is the purpose of the key prop when rendering lists of elements in React?
The key prop is used when rendering lists of elements in React to help React identify which items have changed, been added, or been removed. It should be a unique identifier for each item in the list and is crucial for efficient list rendering and updates.
