7. Proxy:
The Proxy pattern provides a surrogate or placeholder for another object to control access to it.
Example in ReactJS:
Suppose you have a resource-intensive component, and you want to lazy load it.
const HeavyComponent = () => {
return <div>Heavy Component Content</div>;
};
const LazyLoadProxy = ({ shouldLoad }) => {
if (shouldLoad) {
return <HeavyComponent />;
} else {
return <div>Loading...</div>;
}
};
const App = () => {
const [loadHeavyComponent, setLoadHeavyComponent] = useState(false);
return (
<div>
<button onClick={() => setLoadHeavyComponent(true)}>Load Heavy Component</button>
<LazyLoadProxy shouldLoad={loadHeavyComponent} />
</div>
);
};