Prototype Pattern

The Prototype pattern is a creational design pattern that allows the creation of objects by cloning or copying existing objects, known as prototypes. Rather than creating new objects from scratch, the Prototype pattern provides a way to produce new instances by cloning existing ones. This pattern promotes flexibility and efficiency in object creation.

In the following example, we have a prototype button element defined, and the cloneElement function from React is utilized to create a clone of the prototype with a modified event handler. This approach promotes code reusability and runtime customization, as it enables the creation of components based on existing prototypes.

import React, { cloneElement, ReactElement } from "react";
 
// Prototype object
const prototypeButton: ReactElement = <button>Hello</button>;
 
// Cloning the prototype
const cloneButton = cloneElement(prototypeButton, {
  onClick: () => console.log("Clicked"),
});
 
const App = () => (
  <div>
    <h1>Prototype Pattern Example</h1>
    {cloneButton}
  </div>
);
 
export default App;
import React, { cloneElement, ReactElement } from "react";
 
// Prototype object
const prototypeButton: ReactElement = <button>Hello</button>;
 
// Cloning the prototype
const cloneButton = cloneElement(prototypeButton, {
  onClick: () => console.log("Clicked"),
});
 
const App = () => (
  <div>
    <h1>Prototype Pattern Example</h1>
    {cloneButton}
  </div>
);
 
export default App;

Use cases

The Prototype pattern offers several use cases that can benefit software development. By enabling the creation of objects through cloning or copying existing prototypes, this pattern promotes flexibility, efficiency, and code reusability. It is useful in scenarios as:

1. Dynamic Component Creation

The Prototype pattern is useful when you need to dynamically create components based on varying configurations or data. Rather than creating components from scratch, you can clone existing prototypes and modify them as needed.

import React, { cloneElement } from "react";
 
// Prototype component
const prototypeComponent = <div>Hello, World!</div>;
 
// Cloning the prototype with modified props
const clonedComponent = cloneElement(prototypeComponent, {
  style: { color: "red" },
});
 
const App = () => (
  <div>
    <h1>Prototype Pattern Example</h1>
    {clonedComponent}
  </div>
);
 
export default App;
import React, { cloneElement } from "react";
 
// Prototype component
const prototypeComponent = <div>Hello, World!</div>;
 
// Cloning the prototype with modified props
const clonedComponent = cloneElement(prototypeComponent, {
  style: { color: "red" },
});
 
const App = () => (
  <div>
    <h1>Prototype Pattern Example</h1>
    {clonedComponent}
  </div>
);
 
export default App;

2. Efficient State Initialization

The Prototype pattern can be used to efficiently initialize component state. Instead of manually setting state properties, you can clone an existing state object and modify it as needed, saving unnecessary overhead in state initialization.

import React, { useState, cloneElement } from "react";
 
// Prototype state
const initialState = { count: 0 };
 
// Cloning the prototype state
const [state, setState] = useState(cloneElement(initialState));
 
const incrementCount = () => {
  setState((prevState) => ({
    ...prevState,
    count: prevState.count + 1,
  }));
};
 
const App = () => (
  <div>
    <h1>Prototype Pattern Example</h1>
    <p>Count: {state.count}</p>
    <button onClick={incrementCount}>Increment</button>
  </div>
);
 
export default App;
import React, { useState, cloneElement } from "react";
 
// Prototype state
const initialState = { count: 0 };
 
// Cloning the prototype state
const [state, setState] = useState(cloneElement(initialState));
 
const incrementCount = () => {
  setState((prevState) => ({
    ...prevState,
    count: prevState.count + 1,
  }));
};
 
const App = () => (
  <div>
    <h1>Prototype Pattern Example</h1>
    <p>Count: {state.count}</p>
    <button onClick={incrementCount}>Increment</button>
  </div>
);
 
export default App;

Advantages

Disadvantages