React Flashcards
Can different versions of the same package be used in the same application?
Yes, but it is not recommended because different versions may have different dependencies that conflict with one another and cause runtime errors.
Differentiate between Real DOM and Virtual DOM.Real DOM vs Virtual DOM
The Real DOM represents the actual structure of the HTML document and directly interacts with the browser’s rendering engine, while the Virtual DOM is an in-memory representation of the Real DOM, used by frameworks like React to optimize updates by comparing and selectively updating only changed parts of the Real DOM.
Differentiate between stateful and stateless components.
Stateful components, also known as class components in React, maintain and manage their own state data, while stateless components, also known as functional components, do not have their own state and rely solely on props passed to them for rendering.
Explain the lifecycle methods of React components in detail.
The lifecycle methods of React components represent different stages in the lifecycle of a component, from creation to destruction, and provide opportunities to perform actions at specific points. They include:
Mounting Phase:
- constructor(): Called when a component is initialized, used for initializing state and binding event handlers.
- render(): Renders the component’s UI, returning the JSX markup.
- componentDidMount(): Called after the component is rendered for the first time, used for performing initialization that requires DOM nodes, such as making API calls or setting up subscriptions.
Updating Phase:
- shouldComponentUpdate(): Called before rendering when new props or state are received, used to optimize performance by determining if the component needs to re-render.
- render(): Re-renders the component’s UI if shouldComponentUpdate() returns true.
- componentDidUpdate(): Called after the component is updated, used for performing side effects such as fetching new data based on props changes.
Unmounting Phase:
- componentWillUnmount(): Called before a component is removed from the DOM, used for cleanup tasks such as unsubscribing from events or canceling asynchronous tasks.
Error Handling:
componentDidCatch(): Called when an error occurs during rendering, in lifecycle methods of child components, or in event handlers, used for handling and gracefully recovering from errors within the component tree.
Explain the purpose of render() in React.
The render() method in React is responsible for returning the JSX markup that defines the component’s UI, determining what should be displayed based on the current state and props of the component.
How are forms created in React?
Forms in React are created using the <form> element along with input elements like <input></input>, <textarea>, and <select>, typically managed using component state or controlled components to handle user input and updates.</select></textarea>
How can you embed two or more components into one?
You can embed two or more components into one by simply rendering them together within the JSX markup of a parent component, enclosing them within a single parent element.
How can you update the state of a component?
By utilizing the updater function provided with the useState hook.
How come when you declare a variable in any js or jsx file outside of any class, object, or function, it’s not really global to all other files, components?
Variables must be imported and exported to be able to be used in other components.
How different is React’s ES6 syntax when compared to ES5?
Arrow functions that automatically capture ‘this’ value, let (mutable) and const (immutable), improved readability with template literals to concatenate strings `${firstName}, destructuring, and import/export statements
How do you create an event handler in React?
Define a function that will be executed when a specific event occurs, such as a button click, input change, or form submission. They are typically assigned to JSX elements as props, and they are responsible for updating the component’s state or triggering other actions.
How do you modularize code in React?
Break down your application into smaller, reusable components, each encapsulating a specific piece of functionality, then organizing them into separate files and directories, so they can be imported and exported as needed using ES6 module syntax.
In package.json, how can you ensure that only patch version updates are accepted when npm install is run? (i.e. upgrading from 2.3.0 to 2.3.1 is okay, but not 2.4.0 or greater)
Use the ~ (tilde) operator at the start of the version: “dependencies”: {
“your-package”: “~2.3.0”
}
Is setState a synchronous or async call?
It is asynchronous. State is updated in batches, so it continues to run instead of waiting for a function to complete before moving on.
List down the advantages of React Router.
The advantages of React Router include:
Declarative Routing: Allows for defining routes in a declarative manner using JSX, enhancing readability and maintainability.
Nested Routing: Supports nested routes, enabling hierarchical navigation structures and encapsulation of route configurations within components.
Dynamic Routing: Supports dynamic route matching and parameter extraction, facilitating the creation of dynamic and data-driven routes.
URL Manipulation: Provides programmatic access to the browser’s URL, enabling navigation and URL manipulation from within components.
History Management: Integrates with browser history API, allowing for history management, navigation control, and deep linking within single-page applications.
Server-side Rendering: Supports server-side rendering, enabling search engine optimization (SEO) and improved performance for initial page loads.
Community and Documentation: React Router is well-supported by the community with extensive documentation, tutorials, and examples available, making it easy to learn and use.
Extendibility: Offers a flexible and extendable API with hooks and higher-order components, allowing for customizations and integration with other libraries and frameworks.
What is a ref in React?
A ref is way of accessing and interacting with a DOM element or to allow values to change without triggering a re-render.
List some of the cases when you should use Refs.
Accessing and modifying DOM elements., persisting values between renders, Holding mutable values without triggering re-renders.
What are the features of React?
React’s most significant features include its component-based architecture for building reusable UI elements, virtual DOM for efficient rendering, JSX for combining HTML-like syntax with JavaScript, and one-way data binding for predictable data flow.