Proxy Component
Understanding Proxy Components in React to create reusable and maintainable code.
ShipSaaS Team
January 1, 20252 min
Understanding Proxy Components
Your Notes
Detail what you learned here
src/exercise/01.md or on a Notion page
Understanding
Behind this technical term lies something quite simple. It's a reusable component. Following the DRY principle (don't repeat yourself), we don't want to duplicate certain portions of code. Proxy components are useful because they isolate code from future changes as we'll see in the exercises.
function Checkbox() {
return <input type="checkbox" value="check" />
}
function App() {
return <Checkbox />
}
export default AppExercise
Imagine a site structure containing like buttons
function Header() {
return (
<div>
<h1>Welcome</h1>
<button>Like</button>
</div>
)
}
function Content() {
return (
<div>
<h2>Articles</h2>
<span>article 1</span>
<button>Like</button>
<span>article 2</span>
<button>Like</button>
<span>article 3</span>
<button>Like</button>
</div>
)
}
function Footer() {
return (
<div>
<h3>Contact us</h3>
<button>Like</button>
</div>
)
}
function App() {
return (
<React.Fragment>
<Header />
<Content />
<Footer />
</React.Fragment>
)
}
export default AppImagine we want to change the button implementation
<button>Like</button>
// to
<input type="Button" value="Like"/>
// or another: Bootstrap Buttons / Material-ui Button etc ...We would need to replace the implementation of this button everywhere in the code. In this exercise, we'll create a proxy component.
Bonus
1. Change the Button Implementation
Use <input> instead of <button> and apply a style of your choice.
ex:
{backgroundColor:'lightblue', border:'none', padding:'6px 6px' cursor: 'pointer'}