As React continues to dominate the front-end development landscape in 2025, recruiters are tasked with identifying developers who can navigate its ecosystem with confidence and expertise. React's declarative nature, component-based architecture, and seamless integration with modern web development make it indispensable for building dynamic and scalable user interfaces.
This resource, "100+ React Interview Questions and Answers," is tailored for recruiters to simplify the evaluation process. It covers a range of topics, from React basics to advanced concepts such as hooks, state management, performance optimization, server-side rendering (SSR), and TypeScript integration.
Whether you're hiring entry-level developers or senior engineers, this guide enables you to assess a candidate’s:
For a streamlined assessment process, consider platforms like WeCP, which allow you to:
Save time, enhance your interview process, and confidently hire React developers who can build exceptional user experiences and contribute effectively from day one.
React is a declarative, efficient, and flexible JavaScript library for building user interfaces, primarily for single-page applications (SPAs). Developed by Facebook, it allows developers to create large web applications that can change data without reloading the page. Its key features include:
Components are the building blocks of a React application. They are JavaScript functions or classes that return React elements (JSX). There are two main types of components in React:
Functional Components: These are simpler and are defined as JavaScript functions.
They can accept props as arguments and return JSX.
const MyComponent = (props) => {
return <div>{props.message}</div>;
};Class Components: These are defined using ES6 class syntax and can maintain their own state and lifecycle methods.
class MyComponent extends React.Component {
render() {
return <div>{this.props.message}</div>;
}
}Components can be nested, managed, and composed to build complex UIs. They promote code reusability and separation of concerns.
JSX (JavaScript XML) is a syntax extension for JavaScript that allows developers to write HTML-like code within their JavaScript files. JSX makes it easier to create React elements by providing a more intuitive and readable way to describe the UI. When using JSX, developers can combine HTML with JavaScript logic:
const element = <h1>Hello, world!</h1>;JSX is not required to use React, but it is widely adopted because it improves the developer experience. Behind the scenes, JSX is transpiled to JavaScript function calls (e.g., React.createElement), which the React library can render into the DOM.
The render() method is a key method in class components responsible for describing what the UI should look like. It returns JSX that represents the component's structure. This method is called whenever the component’s state or props change, triggering a re-render. Here's an example:
class MyComponent extends React.Component {
render() {
return <div>{this.props.message}</div>;
}
}In functional components, you do not use a render() method. Instead, the function itself returns JSX. The render() method is vital for rendering dynamic content based on the component's state and props.
A functional component in React is created using a JavaScript function that accepts props as an argument and returns JSX. Functional components can be defined as arrow functions or regular functions. Here’s an example of both:
// Arrow Function
const MyComponent = (props) => {
return <div>{props.message}</div>;
};
// Regular Function
function MyComponent(props) {
return <div>{props.message}</div>;
}Functional components are easier to read and test than class components. With the introduction of hooks, functional components can also manage state and side effects.
The primary differences between functional and class components in React are:
Example:
// Class Component
class MyClassComponent extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
return <div>{this.state.count}</div>;
}
}
// Functional Component
const MyFunctionalComponent = () => {
const [count, setCount] = useState(0);
return <div>{count}</div>;
};With React's hooks, functional components have become more powerful and are preferred for new development.
Props (short for properties) are read-only data passed from a parent component to a child component in React. They allow components to communicate and share data. Props can be any type of data, including strings, numbers, objects, functions, or JSX elements. Here's how you can use props:
const ChildComponent = (props) => {
return <div>{props.name}</div>;
};
// Parent Component
const ParentComponent = () => {
return <ChildComponent name="John Doe" />;
};Props are immutable within the child component, meaning the child cannot modify them. This unidirectional data flow helps maintain predictable and manageable code.
To pass data from a parent component to a child component, you use props. The parent component includes the child component in its JSX and provides the desired data as attributes. For example:
const ParentComponent = () => {
const message = "Hello from Parent";
return <ChildComponent text={message} />;
};
const ChildComponent = (props) => {
return <div>{props.text}</div>;
};In this example, the ParentComponent passes the message variable to the ChildComponent via the text prop. The child component can then access this data through its props.
State is an object that represents the parts of a component that can change over time. Each component can maintain its own state, which allows it to keep track of dynamic data that affects rendering. When state changes, React re-renders the component to reflect the new state.
For class components, state is initialized in the constructor and updated using this.setState(). For functional components, state can be managed using the useState hook. Example:
// Class Component
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return <div>{this.state.count}</div>;
}
}
// Functional Component
const MyFunctionalComponent = () => {
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
return <div>{count}</div>;
};Using state allows components to respond to user input, handle dynamic data, and manage the user interface effectively.
In functional components, state is managed using the useState hook, which allows you to declare state variables. The useState hook takes an initial state value and returns an array containing the current state value and a function to update it. Here's an example:
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0); // Declare a state variable
const increment = () => {
setCount(count + 1); // Update state
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
};In this example, count is a state variable initialized to 0. The setCount function updates the count value when the button is clicked. When state changes, the component re-renders to reflect the new state.
setState is a method used in class components to update the component's state. It is asynchronous and triggers a re-render of the component, allowing the UI to reflect the new state. The setState method takes an object that represents the new state or a function that receives the current state and props. Here’s an example:
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return <button onClick={this.increment}>{this.state.count}</button>;
}
}In this example, clicking the button increments the count state by 1, and the component re-renders to display the updated count. Using setState is crucial for maintaining the dynamic behavior of React components.
Lifecycle methods are special methods in class components that allow you to hook into different stages of a component's lifecycle. These methods enable developers to execute code at specific points, such as when the component is created, updated, or unmounted. Key lifecycle methods include:
Example:
class MyComponent extends React.Component {
componentDidMount() {
console.log("Component mounted");
}
componentDidUpdate(prevProps, prevState) {
console.log("Component updated");
}
componentWillUnmount() {
console.log("Component will unmount");
}
render() {
return <div>Hello World</div>;
}
}In functional components, you can replicate lifecycle behavior using the useEffect hook.
The key prop is a special attribute used in lists of React components to provide a unique identifier for each element. It helps React optimize rendering by keeping track of which items have changed, been added, or been removed. When rendering lists, using keys ensures that components maintain their identities across updates. Keys should be stable, unique, and predictable:
const items = ['Apple', 'Banana', 'Cherry'];
const listItems = items.map((item, index) => <li key={index}>{item}</li>);In this example, each list item has a unique key based on its index in the array. However, using index as a key can lead to issues if the list can change. It's generally better to use unique identifiers from the data (e.g., an ID).
Event handling in React is similar to handling events in the DOM but with some differences. React uses camelCase for event names and passes the event object as the first argument to the event handler. You attach event handlers using curly braces. Here’s an example:
class MyComponent extends React.Component {
handleClick = () => {
alert("Button clicked!");
};
render() {
return <button onClick={this.handleClick}>Click Me</button>;
}
}In functional components, you can handle events similarly:
const MyComponent = () => {
const handleClick = () => {
alert("Button clicked!");
};
return <button onClick={handleClick}>Click Me</button>;
};It's important to bind the event handler to the component's context (using arrow functions or .bind(this)) in class components, so this refers to the component instance.
A default export in a React component allows you to export a single value or component from a module. This component can be imported without using curly braces in other modules. Here’s an example:
// MyComponent.js
const MyComponent = () => {
return <div>Hello World</div>;
};
export default MyComponent;
// AnotherFile.js
import MyComponent from './MyComponent';In this case, MyComponent is the default export from MyComponent.js, and it can be imported directly in another file without braces.
To import a component in React, you use the import statement, specifying the component's file path. If the component is a default export, you can import it without curly braces. For named exports, you need to use curly braces. Examples:
// Importing a default export
import MyComponent from './MyComponent';
// Importing named exports
import { MyComponent, AnotherComponent } from './MyComponents';Make sure to use the correct path relative to the importing file. You can also rename imports using the as keyword:
import { MyComponent as CustomComponent } from './MyComponents';The useEffect hook is used in functional components to perform side effects, such as fetching data, subscribing to events, or manipulating the DOM. It serves a similar purpose to lifecycle methods in class components (componentDidMount, componentDidUpdate, and componentWillUnmount). The useEffect hook takes two arguments: a function that contains the side effect and an optional dependency array that determines when the effect should run. Example:
import React, { useEffect, useState } from 'react';
const MyComponent = () => {
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
// Cleanup function (optional)
return () => {
console.log("Cleanup");
};
}, []); // Runs once when the component mounts
return <div>{JSON.stringify(data)}</div>;
};In this example, the effect runs once after the component mounts because the dependency array is empty. If you include dependencies, the effect will re-run whenever any of those dependencies change.
Conditional rendering in React allows you to render components based on certain conditions. You can use JavaScript expressions, if statements, or the ternary operator for conditional rendering. Here are some common techniques:
Using the if statement:
const MyComponent = ({ isLoggedIn }) => {
if (isLoggedIn) {
return <Dashboard />;
} else {
return <Login />;
}
};1. Using the ternary operator:
const MyComponent = ({ isLoggedIn }) => {
return isLoggedIn ? <Dashboard /> : <Login />;
};2. Using logical AND (&&):
const MyComponent = ({ isLoggedIn }) => {
return (
<div>
{isLoggedIn && <Dashboard />}
{!isLoggedIn && <Login />}
</div>
);
};3. In each of these examples, the rendered component changes based on the value of isLoggedIn.
In JavaScript, null and undefined are both primitive values, but they have distinct meanings:
null: Represents an intentional absence of any object value. It is often used to indicate that a variable has been declared but has not been assigned a value.
let myVar = null; // Explicitly set to "no value"undefined: Indicates that a variable has been declared but has not yet been assigned a value or that a property does not exist in an object. If a function does not return a value, it returns undefined by default.
let myVar; // Implicitly undefinedThe key difference is that null is a value that you assign to a variable, while undefined is the default state of uninitialized variables.
React offers several advantages for building user interfaces:
The componentDidMount method is a lifecycle method in class components that is called immediately after a component is mounted in the DOM. This is an ideal place for executing any side effects, such as data fetching, subscribing to events, or performing any setup that requires DOM nodes. It is only called once during the component's lifecycle.
Example:
class MyComponent extends React.Component {
componentDidMount() {
// Fetch data from an API
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));
}
render() {
return <div>Data loaded!</div>;
}
}In this example, the API call to fetch data is made after the component mounts, ensuring that the component is ready to interact with the DOM.
In React, you can use the map() function to iterate over an array of data and render a list of components dynamically. Each component in the list should have a unique key prop to help React identify which items have changed, been added, or been removed.
Example:
const ItemList = ({ items }) => {
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
};
// Usage
const items = ['Apple', 'Banana', 'Cherry'];
<ItemList items={items} />;In this example, the ItemList component receives an array of items, and map() is used to create a list of <li> elements.
State and props are two core concepts in React that are used to manage data in components:
Example:
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return <button onClick={this.increment}>{this.state.count}</button>;
}
}Example:
const Greeting = ({ name }) => {
return <h1>Hello, {name}!</h1>;
};
<Greeting name="Alice" />;In this example, name is a prop passed to the Greeting component.
Handling forms in React involves managing the form data using state and handling events like submission and input changes. You typically use controlled components, where form data is stored in the component's state.
Example:
class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = { name: '' };
}
handleChange = (event) => {
this.setState({ name: event.target.value });
};
handleSubmit = (event) => {
event.preventDefault();
console.log('Submitted name:', this.state.name);
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<input
type="text"
value={this.state.name}
onChange={this.handleChange}
/>
<button type="submit">Submit</button>
</form>
);
}
}In this example, the MyForm component maintains the input value in its state and updates it with handleChange. On form submission, handleSubmit prevents the default behavior and logs the submitted name.
Default props are used to set default values for props in a component. If a parent component does not provide a specific prop, the component will fall back to the default value defined in defaultProps. This is particularly useful for ensuring that a component has a predictable behavior even when certain props are not passed.
Example:
class MyComponent extends React.Component {
render() {
return <div>{this.props.message}</div>;
}
}
MyComponent.defaultProps = {
message: 'Default message',
};
// Usage
<MyComponent />; // Renders "Default message"
<MyComponent message="Custom message" />; // Renders "Custom message"In this example, if message is not provided, it defaults to "Default message".
To prevent the default form submission behavior in React, you can call event.preventDefault() within the form's onSubmit event handler. This stops the page from refreshing and allows you to handle the form submission with your own logic.
Example:
const MyForm = () => {
const handleSubmit = (event) => {
event.preventDefault(); // Prevents the default form submission
console.log('Form submitted');
};
return (
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form>
);
};In this example, calling preventDefault() in the handleSubmit function prevents the page from refreshing when the form is submitted.
A class component is a JavaScript class that extends React.Component and includes a render method, which returns React elements to be displayed on the UI. Class components can maintain internal state and lifecycle methods, making them suitable for managing more complex components.
Example:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}In this example, MyComponent is a class component that manages a count state and updates it when the button is clicked.
The constructor in class components is a special method that is called when a component is created. It is primarily used for two purposes:
Example:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
this.increment = this.increment.bind(this); // Binding the method
}
increment() {
this.setState({ count: this.state.count + 1 });
}
render() {
return <button onClick={this.increment}>{this.state.count}</button>;
}
}In this example, the constructor initializes the state and binds the increment method.
In React, you can apply inline styles to elements using the style attribute. The style attribute accepts a JavaScript object where the keys are camelCased versions of the CSS property names, and the values are the corresponding CSS values.
Example:
const MyComponent = () => {
const style = {
color: 'blue',
backgroundColor: 'lightgray',
padding: '10px',
};
return <div style={style}>This is a styled component!</div>;
};In this example, the style object is defined with CSS properties, and it is applied to the <div> using the style attribute.
Functional components are simpler and more concise than class components. Here are some advantages of using functional components:
Example:
const Greeting = ({ name }) => {
return <h1>Hello, {name}!</h1>;
};In this example, Greeting is a functional component hat receives a prop and renders it without any internal state or lifecycle methods.
The this keyword in React refers to the current instance of the class component. It is used to access properties and methods of the component. In class components, this must be bound to methods in the constructor to ensure that it correctly refers to the component instance when the method is called (especially in event handlers).
Example:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
this.increment = this.increment.bind(this); // Binding the method
}
increment() {
this.setState({ count: this.state.count + 1 });
}
render() {
return <button onClick={this.increment}>{this.state.count}</button>;
}
}In this example, this is used to access setState and state. The method increment is bound to the class instance to ensure that this refers to the component.
In functional components, you can manage multiple state values by using the useState hook for each state variable individually or by using a single useState call with an object to group the state values.
Example using multiple useState:
import React, { useState } from 'react';
const MyComponent = () => {
const [count, setCount] = useState(0);
const [name, setName] = useState('');
return (
<div>
<button onClick={() => setCount(count + 1)}>Increment: {count}</button>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<p>Name: {name}</p>
</div>
);
};Example using a single useState:
import React, { useState } from 'react';
const MyComponent = () => {
const [formData, setFormData] = useState({ count: 0, name: '' });
const increment = () => {
setFormData((prevState) => ({
...prevState,
count: prevState.count + 1,
}));
};
const handleNameChange = (e) => {
setFormData((prevState) => ({
...prevState,
name: e.target.value,
}));
};
return (
<div>
<button onClick={increment}>Increment: {formData.count}</button>
<input
type="text"
value={formData.name}
onChange={handleNameChange}
/>
<p>Name: {formData.name}</p>
</div>
);
};In both examples, we manage multiple state values in a functional component.
The componentWillUnmount method is a lifecycle method in class components that is called just before a component is removed from the DOM. This method is useful for performing cleanup tasks, such as invalidating timers, canceling network requests, or removing event listeners.
Example:
class Timer extends React.Component {
componentDidMount() {
this.timerID = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.timerID); // Cleanup the timer
}
tick() {
console.log('Tick');
}
render() {
return <div>Timer is running!</div>;
}
}In this example, the timer is set up in componentDidMount, and it is cleared in componentWillUnmount to prevent memory leaks.
The componentDidCatch method is a lifecycle method used for error handling in class components. It is invoked when an error occurs in a child component. This method allows you to catch errors and perform actions such as logging the error or displaying a fallback UI.
Example:
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// Update state to render fallback UI
return { hasError: true };
}
componentDidCatch(error, info) {
// Log the error to an error reporting service
console.error("Error occurred:", error, info);
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
// Usage
<ErrorBoundary>
<MyComponent />
</ErrorBoundary>In this example, ErrorBoundary catches errors from its child components and renders a fallback UI when an error occurs.
In a functional component, props are accessed as a parameter of the function. You can destructure the props object directly in the function signature or access the props using the props parameter.
Example using destructuring:
const Greeting = ({ name }) => {
return <h1>Hello, {name}!</h1>;
};
// Usage
<Greeting name="Alice" />;Example accessing props directly:
const Greeting = (props) => {
return <h1>Hello, {props.name}!</h1>;
};
// Usage
<Greeting name="Bob" />;In both examples, the Greeting component accesses the name prop to render the greeting message.
Destructuring allows you to extract values from objects or arrays into distinct variables. In React, you can destructure props to access specific properties directly without needing to refer to the props object repeatedly.
Example:
const UserProfile = ({ name, age, location }) => {
return (
<div>
<h2>Name: {name}</h2>
<p>Age: {age}</p>
<p>Location: {location}</p>
</div>
);
};
// Usage
<UserProfile name="John Doe" age={30} location="New York" />;In this example, the UserProfile component destructures the name, age, and location props from the props object, allowing for cleaner and more readable code.
React.StrictMode is a tool for highlighting potential problems in an application. It is a wrapper component that activates additional checks and warnings for its descendants. It does not affect the production build, only the development environment, and is helpful for identifying unsafe lifecycle methods, deprecated APIs, and other potential issues.
Example:
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return <h1>Hello, World!</h1>;
};
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);In this example, React.StrictMode wraps the App component, enabling checks for the component during development.
Error boundaries are components that catch JavaScript errors in their child component tree, log those errors, and display a fallback UI instead of crashing the entire component tree. You can create an error boundary by defining a class component with componentDidCatch and getDerivedStateFromError lifecycle methods.
Example:
class MyErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, info) {
console.error("Error caught:", error, info);
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
// Usage
<MyErrorBoundary>
<MyComponent />
</MyErrorBoundary>In this example, MyErrorBoundary will catch errors from its children and render an error message if an error occurs.
A ref in React is a way to access a DOM element or a class component instance directly. It is created using the React.createRef() method and is often used for managing focus, text selection, or triggering animations.
Example:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
focusInput = () => {
this.inputRef.current.focus(); // Focus on the input element
};
render() {
return (
<div>
<input ref={this.inputRef} type="text" />
<button onClick={this.focusInput}>Focus Input</button>
</div>
);
}
}In this example, clicking the button focuses the input field by directly accessing it through the inputRef.
Conditional rendering in React can be implemented using JavaScript expressions to determine which components or elements should be rendered based on certain conditions. Common approaches include using the ternary operator, logical AND (&&), or if-else statements.
Example using the ternary operator:
const Greeting = ({ isLoggedIn }) => {
return (
<div>
{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>}
</div>
);
};
// Usage
<Greeting isLoggedIn={true} />;Example using logical AND:
const Notifications = ({ notifications }) => {
return (
<div>
{notifications.length > 0 && <h2>You have notifications!</h2>}
</div>
);
};
// Usage
<Notifications notifications={['Message 1', 'Message 2']} />;In these examples, the output changes based on the value of isLoggedIn or the length of the notifications array, demonstrating how to implement conditional rendering effectively.
Hooks are functions that let you use state and other React features without writing a class. They were introduced in React 16.8 to allow functional components to manage state and side effects, making it easier to reuse stateful logic.
Common hooks include:
The useState hook is used to add state to functional components. It returns an array with two elements: the current state value and a function to update that state.
Example:
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0); // Initialize state with 0
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};In this example, count holds the current count value, and setCount is used to update the count when the button is clicked.
The useEffect hook allows you to perform side effects in functional components. Side effects can include data fetching, subscriptions, or manually changing the DOM. It can run after every render or conditionally based on dependencies.
Example:
import React, { useState, useEffect } from 'react';
const DataFetcher = () => {
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
}, []); // Empty dependency array means it runs once after the first render
return (
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
};In this example, useEffect is used to fetch data when the component mounts. The empty dependency array ensures the effect runs only once.
Controlled components are components whose form data is controlled by the React component's state. The input elements do not maintain their own state; instead, their value is set by the state of the component, making React the single source of truth.
Example:
import React, { useState } from 'react';
const ControlledForm = () => {
const [inputValue, setInputValue] = useState('');
const handleChange = (event) => {
setInputValue(event.target.value); // Update state on input change
};
return (
<form>
<input type="text" value={inputValue} onChange={handleChange} />
<p>You typed: {inputValue}</p>
</form>
);
};In this example, the input's value is controlled by inputValue in the component state.
Handling forms in React typically involves using controlled components. You manage the state of the form inputs, handle changes, and perform actions on submission.
Basic steps to handle forms:
Example:
import React, { useState } from 'react';
const MyForm = () => {
const [name, setName] = useState('');
const handleSubmit = (event) => {
event.preventDefault(); // Prevent default form submission behavior
console.log('Submitted name:', name);
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<button type="submit">Submit</button>
</form>
);
};In this example, the form captures the user's name and logs it upon submission.
Prop drilling occurs when you pass data through many layers of components just to get it to a deeply nested component. This can make the code harder to maintain and understand.
To avoid prop drilling, you can use:
Example using React Context:
const ThemeContext = React.createContext();
const App = () => {
const theme = 'dark';
return (
<ThemeContext.Provider value={theme}>
<Toolbar />
</ThemeContext.Provider>
);
};
const Toolbar = () => {
return (
<div>
<ThemedButton />
</div>
);
};
const ThemedButton = () => {
const theme = React.useContext(ThemeContext);
return <button className={theme}>I am styled by {theme} theme!</button>;
};In this example, ThemeContext is used to avoid passing the theme prop through each level of components.
Example:
class ExampleComponent extends React.Component {
componentDidMount() {
console.log('Component mounted');
}
componentDidUpdate(prevProps) {
if (this.props.data !== prevProps.data) {
console.log('Data changed:', this.props.data);
}
}
}In this example, componentDidMount logs a message when the component mounts, while componentDidUpdate logs changes when the data prop updates.
You can conditionally apply CSS classes in React by using JavaScript expressions or libraries like classnames. This allows you to dynamically set classes based on component state or props.
Example using a ternary operator:
const Button = ({ isActive }) => {
return (
<button className={isActive ? 'active' : 'inactive'}>
Click Me
</button>
);
};Example using classnames library:
import classNames from 'classnames';
const Button = ({ isActive, isDisabled }) => {
const buttonClass = classNames({
active: isActive,
inactive: !isActive,
disabled: isDisabled,
});
return <button className={buttonClass}>Click Me</button>;
};In both examples, the button's class is determined based on the isActive and isDisabled props.
Lifting state up is the process of moving the state from a child component to a common parent component. This allows the parent component to manage the state and pass it down as props to child components.
Steps to lift state up:
Example:
const Parent = () => {
const [count, setCount] = useState(0);
return (
<div>
<ChildA count={count} />
<ChildB onIncrement={() => setCount(count + 1)} />
</div>
);
};
const ChildA = ({ count }) => <h1>{count}</h1>;
const ChildB = ({ onIncrement }) => (
<button onClick={onIncrement}>Increment</button>
);In this example, the count state is lifted to the Parent component, which can now pass it to ChildA and the function to update it to ChildB.
React Context is a feature that allows you to share values (such as state or functions) between components without having to pass props explicitly through every level of the component tree. It is useful for managing global state, themes, user authentication, or any data that needs to be accessed by multiple components at different levels.
When to use React Context:
Example:
const UserContext = React.createContext();
const App = () => {
const user = { name: 'John Doe' };
return (
<UserContext.Provider value={user}>
<UserProfile />
</UserContext.Provider>
);
};
const UserProfile = () => {
const user = React.useContext(UserContext);
return <h1>{user.name}</h1>;
};In this example, UserContext provides user information to UserProfile without needing to pass the user prop explicitly.
A Higher-Order Component (HOC) is a function that takes a component and returns a new component. It is a pattern used to share common functionality between components without modifying their original structure.
Example:
import React from 'react';
// HOC that adds logging functionality
const withLogging = (WrappedComponent) => {
return class extends React.Component {
componentDidMount() {
console.log('Component mounted:', WrappedComponent.name);
}
render() {
return <WrappedComponent {...this.props} />;
}
};
};
// Example component
const MyComponent = (props) => {
return <div>Hello, {props.name}!</div>;
};
// Wrapping the component with HOC
const MyComponentWithLogging = withLogging(MyComponent);
// Usage
<MyComponentWithLogging name="John" />;In this example, withLogging is an HOC that logs a message when the wrapped component mounts. You can use HOCs to add features like logging, authentication, or data fetching to your components.
Example:
class RegularComponent extends React.Component {
render() {
console.log('RegularComponent rendered');
return <div>{this.props.value}</div>;
}
}
class PureComponentExample extends React.PureComponent {
render() {
console.log('PureComponent rendered');
return <div>{this.props.value}</div>;
}
}
// Usage
<RegularComponent value="Hello" />;
<PureComponentExample value="Hello" />;In this example, if you change the value prop to an identical object reference, the RegularComponent will re-render, while the PureComponentExample will not, thus optimizing performance.
React.Fragment is a component that allows you to group multiple elements without adding an extra node to the DOM. It helps in avoiding unnecessary wrapper elements, which can be important for styling or layout purposes.
Example:
const List = () => {
return (
<React.Fragment>
<li>Item 1</li>
<li>Item 2</li>
</React.Fragment>
);
};
// Using shorthand syntax
const ListShort = () => (
<>
<li>Item 1</li>
<li>Item 2</li>
</>
);In both examples, React.Fragment is used to wrap multiple <li> elements without creating an additional parent element in the DOM.
Error boundaries are React components that catch JavaScript errors in their child component tree, log those errors, and display a fallback UI instead of crashing the whole application. To create an error boundary, you need to implement the componentDidCatch lifecycle method and the getDerivedStateFromError static method.
Example:
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true }; // Update state to render fallback UI
}
componentDidCatch(error, info) {
console.error('Error caught by Error Boundary:', error, info);
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children; // Render child components if no error
}
}
// Usage
<ErrorBoundary>
<MyComponent />
</ErrorBoundary>;In this example, if MyComponent throws an error, the ErrorBoundary will catch it and display "Something went wrong" instead of crashing.
The useReducer hook is used for managing complex state logic in functional components. It is an alternative to useState that is preferable when dealing with state transitions based on previous state values or when the state shape is complex.
When to use useReducer:
Example:
import React, { useReducer } from 'react';
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}
const Counter = () => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
Count: {state.count}
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
</div>
);
};In this example, useReducer is used to manage the count state. The reducer function defines how the state changes in response to actions.
Example:
import React, { useMemo } from 'react';
const ExpensiveCalculation = ({ num }) => {
const computedValue = useMemo(() => {
return num * 2; // Expensive calculation
}, [num]); // Recompute only when `num` changes
return <div>{computedValue}</div>;
};Example:
import React, { useCallback, useState } from 'react';
const ParentComponent = () => {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount(c => c + 1);
}, []); // Memoize function, will not change on re-renders
return <ChildComponent onIncrement={increment} />;
};
const ChildComponent = React.memo(({ onIncrement }) => {
return <button onClick={onIncrement}>Increment</button>;
});In this example, useCallback is used to memoize the increment function, ensuring that ChildComponent does not re-render unnecessarily.
Class Components:
Functional Components:
Keys are unique identifiers assigned to elements in a list to help React identify which items have changed, been added, or removed. They should be stable, unique, and predictable.
Importance of keys:
Example:
const ItemList = ({ items }) => {
return (
<ul>
{items.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
};In this example, each item in the list has a unique key prop, enabling React to track which items have changed efficiently.
Routing in a React application is typically managed using a library like react-router-dom. This library allows you to define routes for different components based on the URL path.
Basic implementation:
Install react-router-dom:
npm install react-router-domimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';
const App = () => {
return (
<Router>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route component={NotFound} /> {/* Fallback route */}
</Switch>
</Router>
);
};In this example, BrowserRouter is used to wrap the application, and Route is used to define the path and the corresponding component to render.
PropTypes is a library used for type-checking props in React components. It allows developers to validate the types of props passed to a component and provides warnings in the console if the types are incorrect. This helps in catching bugs and ensuring that components receive the expected data types.
Example:
import PropTypes from 'prop-types';
const MyComponent = ({ name, age }) => {
return (
<div>
Name: {name}, Age: {age}
</div>
);
};
MyComponent.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
};In this example, MyComponent requires name to be a string and age to be a number. If the props do not match the specified types, a warning will be logged in the console during development.
You can manage side effects in React components using the useEffect hook. This hook allows you to perform side effects such as data fetching, subscriptions, or manual DOM manipulation in functional components. You can specify dependencies for the effect to control when it runs.
Example:
import React, { useEffect, useState } from 'react';
const DataFetchingComponent = () => {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
const result = await response.json();
setData(result);
};
fetchData();
}, []); // Empty array means this effect runs only once after the initial render
return (
<div>
{data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}
</div>
);
};In this example, useEffect is used to fetch data when the component mounts, and the fetched data is stored in the component's state.
React.StrictMode is a tool for highlighting potential problems in an application. It activates additional checks and warnings for its descendants, helping to identify issues related to deprecated APIs, unexpected side effects, and other common problems.
Key features:
Example:
import React from 'react';
import MyComponent from './MyComponent';
const App = () => {
return (
<React.StrictMode>
<MyComponent />
</React.StrictMode>
);
};In this example, MyComponent is wrapped in React.StrictMode, enabling strict checks for it.
You can optimize performance in React applications using several techniques:
Code splitting is the practice of breaking your application into smaller bundles, which can be loaded on demand. This helps reduce the initial load time by only loading the code required for the initial render.
How to achieve code splitting:
Example:
import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));
const App = () => {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
};In this example, LazyComponent is loaded only when it is needed, and Suspense is used to show a fallback while the component is loading.
You can fetch data in a functional component using the useEffect hook along with the fetch API or any data-fetching library like Axios.
Example:
import React, { useEffect, useState } from 'react';
const DataFetchingComponent = () => {
const [data, setData] = useState([]);
useEffect(() => {
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
const result = await response.json();
setData(result);
};
fetchData();
}, []); // Run only once after the initial render
return (
<div>
{data.map(item => (
<div key={item.id}>{item.name}</div>
))}
</div>
);
};In this example, data is fetched and stored in the state when the component mounts.
Handling authentication in a React application typically involves the following steps:
Example:
import React, { createContext, useState, useContext } from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
const AuthContext = createContext();
const AuthProvider = ({ children }) => {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const login = () => setIsAuthenticated(true);
const logout = () => setIsAuthenticated(false);
return (
<AuthContext.Provider value={{ isAuthenticated, login, logout }}>
{children}
</AuthContext.Provider>
);
};
const PrivateRoute = ({ component: Component, ...rest }) => {
const { isAuthenticated } = useContext(AuthContext);
return (
<Route
{...rest}
render={props =>
isAuthenticated ? (
<Component {...props} />
) : (
<Redirect to="/login" />
)
}
/>
);
};
// Usage in App component
const App = () => {
return (
<AuthProvider>
<Router>
<PrivateRoute path="/protected" component={ProtectedComponent} />
<Route path="/login" component={LoginComponent} />
</Router>
</AuthProvider>
);
};In this example, the AuthProvider manages the authentication state, and the PrivateRoute component restricts access to the protected route.
The useLayoutEffect hook is similar to useEffect, but it runs synchronously after all DOM mutations. This means that any updates made in useLayoutEffect will be reflected in the browser before the browser has a chance to paint.
When to use useLayoutEffect:
Example:
import React, { useLayoutEffect, useRef } from 'react';
const LayoutEffectComponent = () => {
const boxRef = useRef();
useLayoutEffect(() => {
const height = boxRef.current.clientHeight;
console.log('Box height:', height);
});
return <div ref={boxRef} style={{ height: '100px' }}>Hello</div>;
};In this example, useLayoutEffect is used to read the height of the DOM element immediately after it has been updated.
You can set default props in a functional component using the defaultProps property. This is particularly useful for ensuring that your component has fallback values if certain props are not provided.
Example:
const MyComponent = ({ name }) => {
return <div>Hello, {name}!</div>;
};
MyComponent.defaultProps = {
name: 'Guest', // Default value
};
// Usage
<MyComponent />; // Will render "Hello, Guest!"In this example, if name is not provided, the component will render "Hello, Guest!".
The useRef hook is used to create a mutable object that persists for the full lifetime of the component. It is commonly used to access DOM elements directly, store a mutable value, or retain values across renders without causing re-renders.
Example:
import React, { useRef } from 'react';
const FocusInput = () => {
const inputRef = useRef();
const focusInput = () => {
inputRef.current.focus(); // Focus the input element
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={focusInput}>Focus Input</button>
</div>
);
};In this example, useRef is used to get a reference to the input element, allowing you to programmatically focus it.
You can share state between components using the Context API by creating a context, providing it at a higher level in your component tree, and consuming it in child components.
Example:
import React, { createContext, useState, useContext } from 'react';
// Create context
const ThemeContext = createContext();
const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState('light');
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
{children}
</ThemeContext.Provider>
);
};
const ThemedComponent = () => {
const { theme, setTheme } = useContext(ThemeContext);
return (
<div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
<p>The current theme is {theme}</p>
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>Toggle Theme</button>
</div>
);
};
// Usage in App component
const App = () => {
return (
<ThemeProvider>
<ThemedComponent />
</ThemeProvider>
);
};In this example, the ThemeProvider provides the current theme and a function to toggle it, allowing any child component to access and modify the theme state.
Common anti-patterns in React include:
You can handle form validation in React using controlled components, state management, and validation libraries like Formik or Yup.
Example using local state:
import React, { useState } from 'react';
const FormValidation = () => {
const [email, setEmail] = useState('');
const [error, setError] = useState('');
const validateEmail = (email) => {
// Basic email validation
const regex = /\S+@\S+\.\S+/;
return regex.test(email);
};
const handleSubmit = (e) => {
e.preventDefault();
if (!validateEmail(email)) {
setError('Invalid email address');
} else {
setError('');
// Submit the form
}
};
return (
<form onSubmit={handleSubmit}>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Enter your email"
/>
{error && <div style={{ color: 'red' }}>{error}</div>}
<button type="submit">Submit</button>
</form>
);
};In this example, the email input is validated on form submission, and an error message is displayed if the input is invalid.
Middleware in React applications, especially when using libraries like Redux, acts as a bridge between actions and the reducer. It allows you to intercept actions dispatched to the store and perform additional operations, such as logging, asynchronous API calls, or modifying the actions before they reach the reducer.
Common uses of middleware:
Example using Redux Thunk:
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunk));In this example, redux-thunk middleware is applied to the Redux store to handle asynchronous actions.
Lazy loading for components in React can be implemented using React.lazy and Suspense. This allows you to load components only when they are needed, reducing the initial load time.
Example:
import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));
const App = () => {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
};In this example, LazyComponent will only be loaded when it is rendered, and Suspense provides a fallback UI while loading.
Example using Enzyme:
import { shallow, mount } from 'enzyme';
import MyComponent from './MyComponent';
// Shallow rendering
const wrapperShallow = shallow(<MyComponent />);
// Full DOM rendering
const wrapperMount = mount(<MyComponent />);Best practices for structuring a React application include:
You can create a custom hook by defining a function that uses built-in hooks and returns values or functions. Custom hooks allow you to encapsulate reusable logic.
Example:
import { useState, useEffect } from 'react';
const useFetch = (url) => {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(url);
const result = await response.json();
setData(result);
} catch (err) {
setError(err);
}
};
fetchData();
}, [url]);
return { data, error };
};
// Usage in a component
const DataFetchingComponent = () => {
const { data, error } = useFetch('https://api.example.com/data');
if (error) return <div>Error: {error.message}</div>;
if (!data) return <div>Loading...</div>;
return <div>{JSON.stringify(data)}</div>;
};In this example, the useFetch custom hook encapsulates the logic for fetching data and can be reused in multiple components.
The useImperativeHandle hook customizes the instance value that is exposed when using ref in functional components. This is useful for controlling the instance value and exposing specific methods or properties to the parent component.
Example:
import React, { useImperativeHandle, forwardRef, useRef } from 'react';
const CustomInput = forwardRef((props, ref) => {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return <input ref={inputRef} type="text" />;
});
// Usage in a parent component
const ParentComponent = () => {
const inputRef = useRef();
const handleFocus = () => {
inputRef.current.focus();
};
return (
<div>
<CustomInput ref={inputRef} />
<button onClick={handleFocus}>Focus Input</button>
</div>
);
};In this example, useImperativeHandle allows the parent component to call the focus method defined in the child component.
You can implement search functionality in a React application by managing search input state and filtering data based on that input.
Example:
import React, { useState } from 'react';
const SearchComponent = ({ items }) => {
const [searchTerm, setSearchTerm] = useState('');
const filteredItems = items.filter(item =>
item.toLowerCase().includes(searchTerm.toLowerCase())
);
return (
<div>
<input
type="text"
placeholder="Search..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<ul>
{filteredItems.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);
};
// Usage
const items = ['Apple', 'Banana', 'Cherry', 'Date'];
<SearchComponent items={items} />;In this example, the search input filters a list of items based on the user's input.
You can handle API errors in a React component by using state to track the error status and displaying appropriate messages to the user.
Example:
import React, { useEffect, useState } from 'react';
const ApiComponent = () => {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const result = await response.json();
setData(result);
} catch (err) {
setError(err.message);
}
};
fetchData();
}, []);
if (error) return <div>Error: {error}</div>;
if (!data) return <div>Loading...</div>;
return <div>{JSON.stringify(data)}</div>;
};In this example, errors during the fetch process are caught and stored in the error state, which is displayed to the user.
The virtual DOM is a lightweight representation of the actual DOM. It is a concept used by React to optimize rendering performance. Instead of directly manipulating the real DOM, which can be slow and inefficient, React first updates the virtual DOM.
When changes occur, React creates a new virtual DOM tree and compares it to the previous version using a process called diffing. After identifying what has changed, React efficiently updates only the necessary parts of the real DOM. This minimizes direct manipulations and enhances performance.
Reconciliation is the process by which React updates the UI in response to state changes. It involves the following steps:
This approach makes React efficient, as it minimizes the number of direct manipulations to the real DOM, which can be costly in terms of performance.
The shouldComponentUpdate method is a lifecycle method in class components that allows developers to optimize performance. It is called before the component is re-rendered and gives a chance to control whether the component should update or not.
shouldComponentUpdate(nextProps, nextState) {
// Return true to allow the update, false to prevent it
return this.props.someValue !== nextProps.someValue;
}If this method returns false, the component will not re-render, thus saving resources. This is particularly useful when you want to prevent unnecessary updates, especially in components with complex rendering logic or heavy computations.
Several techniques can help optimize performance in React applications:
React.memo is a higher-order component that allows functional components to avoid unnecessary re-renders. It does this by memoizing the rendered output based on the component's props. If the props do not change, React.memo returns the memoized result instead of re-rendering the component.
const MyComponent = React.memo(({ data }) => {
// Render logic
});This optimization is particularly useful for components that receive the same props frequently, improving performance in applications with many components.
Render props is a pattern for sharing code between React components using a prop whose value is a function. This function returns a React element, allowing you to create flexible and reusable components.
Example:
const DataFetcher = ({ render }) => {
const [data, setData] = useState(null);
useEffect(() => {
fetch('/api/data')
.then(response => response.json())
.then(setData);
}, []);
return render(data);
};
// Usage
<DataFetcher render={data => (
<div>{data ? data.title : 'Loading...'}</div>
)} />In this example, DataFetcher takes a render prop, allowing it to pass the fetched data back to the parent component for rendering.
Both useEffect and useLayoutEffect are hooks used to perform side effects in functional components, but they differ in timing:
useEffect(() => {
// Runs after render
}, []);
useLayoutEffect(() => {
// Runs before the browser paint
}, []);Side effects in React applications are typically managed using the useEffect hook in functional components and lifecycle methods (such as componentDidMount, componentDidUpdate, and componentWillUnmount) in class components.
Example using useEffect:
import React, { useEffect, useState } from 'react';
const Example = () => {
const [data, setData] = useState(null);
useEffect(() => {
fetch('/api/data')
.then(response => response.json())
.then(setData);
return () => {
// Cleanup logic if needed
};
}, []); // Dependency array
return <div>{data ? data.title : 'Loading...'}</div>;
};In this example, data fetching is performed as a side effect when the component mounts. The cleanup function can be used to clean up subscriptions or timers.
Common performance pitfalls in React applications include:
Testing React components can be effectively done using libraries such as Jest and React Testing Library. Here are some approaches:
Example using React Testing Library:
import { render, screen, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';
test('renders MyComponent and handles click', () => {
render(<MyComponent />);
const button = screen.getByText('Click Me');
fireEvent.click(button);
expect(screen.getByText('Clicked!')).toBeInTheDocument();
});This example tests whether a button click updates the component's state and re-renders correctly.
Both useReducer and useState are hooks for managing state in functional components, but they are used in different scenarios:
useState: Ideal for managing simple state variables. It allows you to manage individual pieces of state and is straightforward to use.
Example:
const [count, setCount] = useState(0);useReducer: More suitable for complex state logic where the next state depends on the previous state. It works similarly to Redux and is beneficial when you have multiple sub-values or when the next state is computed using the previous state.
Example:
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}
const [state, dispatch] = useReducer(reducer, initialState);Server-side rendering (SSR) can be achieved in React using frameworks like Next.js or by using libraries like React Router with Node.js and Express.In a basic setup using Express, you can do the following:
Example:
import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './App';
const app = express();
app.get('/', (req, res) => {
const html = renderToString(<App />);
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
</head>
<body>
<div id="root">${html}</div>
<script src="bundle.js"></script>
</body>
</html>
`);
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});This approach allows the server to render the initial view, which can improve performance and SEO.
Code splitting is a technique to split your code into smaller bundles that can be loaded on demand, rather than loading the entire application at once. This improves the initial load time of your application.
You can implement code splitting in React using dynamic import() syntax and React's Suspense component.
Example:
import React, { Suspense, lazy } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
const App = () => (
<div>
<h1>My App</h1>
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
</div>
);In this example, LazyComponent is loaded only when it is needed, and Suspense displays a fallback UI while the component is loading.
Handling authentication in a React application can involve several steps, typically including:
Example:
const loginUser = async (credentials) => {
const response = await fetch('/api/login', {
method: 'POST',
body: JSON.stringify(credentials),
headers: { 'Content-Type': 'application/json' },
});
const data = await response.json();
localStorage.setItem('token', data.token); // Store the token
};
// Protected Route example
const ProtectedRoute = ({ component: Component, ...rest }) => {
const isAuthenticated = !!localStorage.getItem('token');
return (
<Route
{...rest}
render={props =>
isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
}
/>
);
};Best practices for structuring a React application include:
Custom hooks are JavaScript functions that start with the word "use" and allow you to extract component logic into reusable functions.
Example of a custom hook for fetching data:
import { useState, useEffect } from 'react';
const useFetch = (url) => {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(url);
if (!response.ok) throw new Error('Network error');
const result = await response.json();
setData(result);
} catch (err) {
setError(err.message);
}
};
fetchData();
}, [url]);
return { data, error };
};
// Usage in a component
const MyComponent = () => {
const { data, error } = useFetch('/api/data');
return <div>{error ? error : JSON.stringify(data)}</div>;
};The useImperativeHandle hook customizes the instance value that is exposed to parent components when using ref. This is useful when you want to expose certain functions or properties of a child component to its parent.
Example:
import React, { useImperativeHandle, forwardRef, useRef } from 'react';
const Child = forwardRef((props, ref) => {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
},
}));
return <input ref={inputRef} />;
});
// Parent Component
const Parent = () => {
const childRef = useRef();
const handleFocus = () => {
childRef.current.focus();
};
return (
<div>
<Child ref={childRef} />
<button onClick={handleFocus}>Focus Input</button>
</div>
);
};In this example, the parent component can call the focus method on the child component's input field.
Global state can be managed using the React Context API or state management libraries like Redux or MobX.
Using React Context API:
Example:
import React, { createContext, useContext, useState } from 'react';
// Create Context
const GlobalStateContext = createContext();
// Provider Component
const GlobalStateProvider = ({ children }) => {
const [state, setState] = useState({ user: null });
return (
<GlobalStateContext.Provider value={[state, setState]}>
{children}
</GlobalStateContext.Provider>
);
};
// Consumer Hook
const useGlobalState = () => {
return useContext(GlobalStateContext);
};
// Usage in a Component
const UserProfile = () => {
const [state, setState] = useGlobalState();
return <div>User: {state.user ? state.user.name : 'Guest'}</div>;
};The useContext hook allows functional components to subscribe to React context, making it easier to access the context value without wrapping components in a Context.Consumer. This simplifies consuming context in components.
Example:
const MyContext = createContext();
const MyComponent = () => {
const contextValue = useContext(MyContext);
return <div>{contextValue}</div>;
};In this example, MyComponent can directly access the value provided by MyContext.
To ensure the security of your React application, consider the following best practices:
Using TypeScript with React brings several benefits and implications:
To implement PWA features in a React application, you can follow these steps:
Create React App: If using Create React App, you can enable PWA support by changing the service worker configuration in src/index.js:
import { register } from './serviceWorkerRegistration';
register(); // Register the service workerManifest File: Create a manifest.json file in the public directory to define the app's name, icons, theme color, and other metadata. This file allows users to install the app on their devices.
Example: public/manifest.json
{
"short_name": "MyApp",
"name": "My Awesome React App",
"icons": [
{
"src": "icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}Redux is a popular state management library for JavaScript applications, particularly those built with React. Its main roles include:
Handling API versioning is essential to maintain backward compatibility while updating your API. Here are common strategies:
URI Versioning: Include the version in the API endpoint URL. For example:
GET /api/v1/users1. Header Versioning: Pass the version as a custom header in the request:
GET /api/users
Headers: { "API-Version": "1.0" }2. Query Parameter Versioning: Use a query parameter to specify the API version:
GET /api/users?version=13. Backward Compatibility: When releasing a new version, ensure that the previous versions remain functional. This could involve maintaining old endpoints or providing a deprecation notice.
4. Documentation: Keep API documentation updated with the versions and changes, helping developers understand how to interact with different versions.
Managing complex state in React can involve several strategies:Reducer Pattern: Use the useReducer hook to manage complex state logic, especially when the state is an object or when state transitions depend on previous states.
Example:
const initialState = { count: 0, user: null };
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { ...state, count: state.count + 1 };
case 'setUser':
return { ...state, user: action.payload };
default:
return state;
}
}
const [state, dispatch] = useReducer(reducer, initialState);To optimize images and assets in a React application, consider the following practices:
Lazy Loading: Implement lazy loading for images and assets to improve initial load time. You can use the loading="lazy" attribute for <img> tags or a library like react-lazy-load.
Example:
<img src="image.jpg" loading="lazy" alt="Description" />Responsive Images: Use the <picture> element or srcset attribute to serve different image sizes based on the viewport size, ensuring optimal loading.
Example:
<picture>
<source media="(min-width: 800px)" srcSet="large.jpg" />
<img src="small.jpg" alt="Description" />
</picture>React DevTools is a browser extension that provides powerful tools for debugging and inspecting React applications. Its significance includes:
WebSocket communication allows real-time bi-directional communication between the client and server. Here’s how to implement it in a React application:Install a WebSocket Library (optional): While you can use the native WebSocket API, libraries like socket.io-client can simplify the process.
Example:
npm install socket.io-clientEstablish Connection: Create a WebSocket connection in your component using useEffect to handle lifecycle events.
Example using native WebSocket API:
import React, { useEffect, useState } from 'react';
const ChatComponent = () => {
const [messages, setMessages] = useState([]);
const ws = new WebSocket('ws://localhost:4000');
useEffect(() => {
ws.onmessage = (event) => {
setMessages((prevMessages) => [...prevMessages, event.data]);
};
return () => {
ws.close(); // Cleanup on unmount
};
}, [ws]);
return (
<div>
{messages.map((msg, index) => (
<div key={index}>{msg}</div>
))}
</div>
);
};Sending Messages: Create a function to send messages through the WebSocket connection.
Example:
const sendMessage = (message) => {
ws.send(message);
};Server-side rendering (SSR) has its benefits and challenges:Benefits:
Challenges:
Handling cross-origin requests involves managing CORS (Cross-Origin Resource Sharing) in your React application. Here are some strategies:
Using Development Proxy: For local development, you can set up a proxy in your package.json file using Create React App:
"proxy": "http://localhost:5000"Enhancing accessibility in a React application is essential for making it usable for all users, including those with disabilities. Here are some strategies:
Integration testing for React applications focuses on testing how components work together. Here are the steps and best practices:
Render Components: Render components with the necessary context and props. Use utility functions to wrap components that require providers (like Redux or Context API).
Example using React Testing Library:
import { render, screen } from '@testing-library/react';
import { Provider } from 'react-redux';
import store from './store';
import MyComponent from './MyComponent';
test('renders MyComponent', () => {
render(
<Provider store={store}>
<MyComponent />
</Provider>
);
expect(screen.getByText(/some text/i)).toBeInTheDocument();
});Simulate User Interactions: Use fireEvent or user-event to simulate user interactions like clicks, typing, and other events, and assert the expected outcomes.
Example:
import userEvent from '@testing-library/user-event';
test('clicking the button updates the count', () => {
render(<MyComponent />);
userEvent.click(screen.getByRole('button'));
expect(screen.getByText(/count: 1/i)).toBeInTheDocument();
});The useEffect hook is essential for managing side effects in functional components, including data fetching. Here’s its role in this context:
Dependency Array: By passing a dependency array as the second argument to useEffect, you can control when the effect runs. For example, if you want to fetch data when the component mounts, you can provide an empty array:
useEffect(() => {
fetchData();
}, []); // Runs only on mountCleanup Function: If the effect involves setting up subscriptions or intervals, you can return a cleanup function to prevent memory leaks:
useEffect(() => {
const subscription = subscribeToData();
return () => {
subscription.unsubscribe(); // Cleanup
};
}, []);Handling Async Operations: Since useEffect cannot return a promise directly, you can define an async function within it or use an IIFE (Immediately Invoked Function Expression) to handle async data fetching:
useEffect(() => {
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
setData(data);
};
fetchData();
}, []);Implementing caching in a React application can improve performance by reducing unnecessary network requests. Here are some strategies:
Local Storage: Use the browser’s local storage or session storage to cache data fetched from APIs. This allows you to persist data across sessions.
Example:
const fetchData = async () => {
const cachedData = localStorage.getItem('myData');
if (cachedData) {
setData(JSON.parse(cachedData));
} else {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
setData(data);
localStorage.setItem('myData', JSON.stringify(data));
}
};Service Workers: Use service workers to cache API responses for offline access and improve load times.
React Query: Consider using libraries like React Query or SWR, which provide built-in caching mechanisms and handle data fetching, updating, and caching out of the box.
Example with React Query:
import { useQuery } from 'react-query';
const { data, error } = useQuery('myData', fetchData);Using component libraries in React offers several benefits:
Managing performance in large-scale React applications involves several strategies:
To implement responsive design in a React application, you can follow these practices:
Media Queries: Use CSS media queries to apply different styles at various breakpoints, allowing you to adapt layouts for different screen sizes.
Example:
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}Ensuring your React application is SEO-friendly can involve several strategies:
Managing dependencies in a React project involves several best practices:
Future trends in the React ecosystem may include:
These trends indicate that the React ecosystem is continuously evolving to meet the needs of developers and users, making it an exciting space to watch and participate in.
