Wrap Lazy Loaded React Components with React Suspense
Props and State in React Components
Props:
Definition: Props are inputs to a React component, passed from parent to child components.
Characteristics: Immutable within the child component, allowing data and functions to be passed across components.
State:
Definition: State is a way to manage data that changes over time within a component.
Characteristics: Mutable and can be updated using the setState method in class components or the useState hook in functional components.
Decoupling Business Logic from UI with React Hooks
React hooks, such as useState and useEffect, enable the separation of business logic from the UI in functional components. This decoupling is more challenging in class components because lifecycle methods and state management are tightly coupled with the component's structure.
Hooks allow you to:
Manage state with useState.
Perform side effects with useEffect.
Reuse logic across components with custom hooks.
useEffect Hook and Lifecycle Methods
The useEffect hook can replace lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount. It is used for all side effects, such as data fetching, subscriptions, or manually changing the DOM.
Example:
import React, { useState, useEffect } from 'react';
function ExampleComponent() {
const [count, setCount] = useState(0);
useEffect(() => {
// This code runs after the component mounts and updates
console.log(`Count is: ${count}`);
// Cleanup function runs before the component unmounts
return () => {
console.log('Cleanup');
};
}, [count]); // Dependency array
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
React Suspense
React Suspense is a feature that allows you to wait for some code to load before rendering your component. It is typically used for code splitting and lazy loading components.
React.lazy and React.Suspense for Improved User Experience
React.lazy:
Purpose: Dynamically import components, returning a promise that resolves to the component.
Benefit: Reduces initial load time by loading only necessary components for the initial render.
React.Suspense:
Purpose: Wrap lazy-loaded components and provide a fallback UI while the component is loading.
Benefit: Enhances user experience by showing a loading indicator or placeholder until the component is ready.
React Suspense and the useTransition Hook
useTransition is a hook that allows you to mark updates as non-urgent, enabling you to show a fallback UI while waiting for the update to complete. This can prevent blank screens and loading states when data is not ready.
Example:
import React, { useState, useEffect, lazy, Suspense, useTransition } from 'react';
// Lazy load the component
const LazyComponent = lazy(() => import('./LazyComponent'));
function App() {
const [count, setCount] = useState(0);
const [isPending, startTransition] = useTransition();
useEffect(() => {
console.log(`Count is: ${count}`);
}, [count]);
const handleClick = () => {
startTransition(() => {
setCount(count + 1);
});
};
return (
<div>
<p>{count}</p>
<button onClick={handleClick} disabled={isPending}>
{isPending ? 'Loading...' : 'Increment'}
</button>
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
</div>
);
}
export default App;
In this example:
useTransition is used to mark the state update as non-urgent, providing a smoother user experience.
The button shows a loading state while the transition is pending.
Suspense and React.lazy are used to lazy load the LazyComponent.
References
Olexandr, Bezverhiy, and Kutsenko Olexandr. "OPTIMIZATION OF CROSS-PLATFORM APPLICATIONS USING THE REACT LIBRARY." World science 3 (85) (2024): 1-6.
Duldulao, Devlin Basilan, and Ruby Jane Leyva Cabagnot. "Practical Enterprise React."
Zhao, Ziang. "Build a live news application with Next. js 13." (2023).
Pham, Hung Anh. "REACT CONCURRENT MODE: MECHANISMS, PATTERNS AND APPLICATION." (2023).
Roussel, Marion. "Notion REST API and React: Integration of a Blog and a Knowledge Base." (2024).
