React Flashcards
What is React
An open-source JavaScript library used for building user interfaces. Allows developers to create reusable UI components and efficiently update and render them as the application state changes.
What are the key features of React.js?
Virtual DOM, Component-base architecture, Unidirectional data flow, JSX and supports server-side rendering
What is JSX?
Is a syntax extension for JavaScript used in React.js. Allows you to write HTML-like code directly within JavaScript.
Difference between function and class components
Function components are stateless and defined as JavaScript Functions. Class components, are defined as ES6 classes and have additional features like lifecycle methods and state management.
What is the difference between a controlled and an uncontrolled component?
Controlled component is a component whose state is controlled by React. Receives its current value and change callbacks as props and notifies parent components of state changes. Uncontrolled component stores its own state internally and manages it through the DOM.
What is the significance of the “children” prop in React?
A special prop that allows components to display whatever is included between their opening and closing tags.
What is the difference between props and state.
Both used to mange data. Props are read-only and passed from parent to child component. State is mutable and is managed internally within a component. Used to manage data that can change over time within a component
Significance of the virtual DOM?
Is a lightweight copy of the actual DOM. When there is a change in application state, it is compared to real DOM and only updates the necessary part.
What are React Fragments
Allow you to group multiple elements together without adding an extra DOM.
What is Context API in React?
Creates a global state accessible to any component within a designated context.
Explain the concept of prop drilling in React.
Process of passing props through multiple layers of components in order to reach a deeply nested component that needs to access the data.
How does React handle list and keys
Each item in the list should have a unique “key” prop assigned to it. The “key” prop helps React identify which items have changed, been added, or been removed. Keys improve the efficiency of list rendering and help maintain component state correctly.
What are React hooks
Are functions that allow functional components to use state and other React features without a class.
What is the purpose of useEffect hook
Is used to perform side effects in a React component.
What is the role of the useState hook
Is used to add state to functional components. Returns an array with two element, the current state value and a function to update the value.
What is the purpose of useCallback hook
Used to memorize functions, returns a memorized version of the callback function that only changes if one of the dependencies has changed.
What is React Fiber
Is a re implementation of React’s core algorithm for rendering and updating components.Introduced to improve performance, enable incremental rendering and better support concurrent mode
What are portals in React.
Allows you to render components at a different positions on the DOM tree, which can be useful for modals, tooltips, and overlays.
Explain the concept of code splitting in React
Is a technique used to split a React application’s JavaScript bundle into smaller chunks. It allows you to load only the required code when needed.
Explain the concept of error boundaries in React.
React component that catches JavaScript errors in their child compoent tree and display fallback UI instead of crashing the whole application. Helps isolate errors and provide bettwer user experience.
What is the purpose of “React.StrictMode”
Helps highlight potential problems and deprecated features in the application code
Explain the concept of higher-order components
Functions that take a component as input and return an enhanced version of that component.
What is a state in React?
Is an object that holds some information that may change over the lifetime of the component. When the state object changes, the component re-renders
What are the components in React?
Reusable and self-contained module that represents a part of the user interface. It can be a function component or a class component
Why use React instead of other frameworks, like Angular?
Easy creation of dynamic application, Improved performance through virtual DOM, Reusable components, unidirectional data flow, dedicated tools for easy debugging and massive community.
Can web browsers read JSX directly?
Because web browsers are built to only read regular JS objects and JSX is not a regular JavaScript object. File needs to be transformed into a regular JavaScript object. For this, we use Babel
How can you handle events in React
Handle events by providing event handlers as props to elements. React uses synthetic events that wrap the native browser events and provide consistent behavior across different browsers.
What is Reconciliation?
Reconciliation is the process through which React updates the Browser DOM
What is the difference between Shadow DOM and Virtual DOM?
Shadow DOM is a web standard provided by browser primarily used to encapsulate HTML, CSS and JavaScript. While the Virtual DOM is a concept used in some JavaScript libraries (e.g., React) which involves keeping a virtual representation of the UI in memory and syncing it with the real DOM through a reconciliation process.
What is useRef
Is a React Hook that lets you reference a value that’s not needed for rendering. Typically used when you need direct access to a DOM element or an instance of a component.
What is context API
Context provides a way to pass data through the component tree without having to pass props down manually at every level.
What are Disadvantages of React?
Fast changes and updates makes it difficult to create documentation, and required constant relearning. SEO Problems. it is just a view library.
Why is Vite so fast?
Vite use ESM for on-demand file serving and compilation during development, ensuring that only changed or requested files are processed.
