Create Element VS Clone Element in React

Photo by Lautaro Andreani on Unsplash

In React, React.createElement and React.cloneElement are two methods used for element creation and manipulation, but they serve different purposes.

Subscribe to my newsletter:

beehiiv - The newsletter platform built for growth

Here's a detailed comparison to help you understand their differences and use cases.

React.createElement

Purpose:

• Used to create and return a new React element of a given type.
• This is the method behind JSX syntax, so when you write JSX, it gets transformed into React.createElement calls.

Syntax:

React.createElement(
  type, 
  [props], 
  [...children]
)

• type: The type of the element (e.g., a string for HTML elements like ‘div’, ‘span’, or a React component).
• props: An object containing properties (props) for the element.
• children: The children of the element, can be one or more elements or text nodes.

Example:

Without JSX:

const element = React.createElement('div', { className: 'my-div' }, 'Hello, world!');

With JSX (equivalent):

const element = <div className="my-div">Hello, world! This is React!!</div>;

Use Cases:

• Creating elements dynamically.
• Useful when you need to generate elements programmatically without using JSX.

React.cloneElement

Purpose:

• Used to clone and return a new React element using an existing element as the starting point.
• This is useful for modifying an existing element, such as changing its props or children.

Syntax:

React.cloneElement(
  element, 
  [props], 
  [...children]
)

• element: The existing React element to clone.
• props: An object containing new or updated properties to merge with the existing element’s props.
• children: Optional new children to replace the existing element’s children.

Example:

const originalElement = <button className="original">Click me</button>;
const clonedElement = React.cloneElement(originalElement, { className: 'cloned' }, 'New text');

Use Cases:

• Modifying props or children of an existing element, is particularly useful in higher-order components (HOCs).
• Adding additional props or overriding existing ones without reconstructing the element from scratch.

Key Differences:

Creation vs. Cloning:

• React.createElement is for creating new elements from scratch.
• React.cloneElement is for creating a modified copy of an existing element.

Usage Context:

• Use React.createElement when you need to define a new element.
• Use React.cloneElement when you need to reuse an existing element but with different props or children.

JSX Transformation:

• JSX syntax is syntactic sugar for React.createElement.
• There is no JSX equivalent for React.cloneElement.

Practical Example:

Consider a scenario where you have a button and you want to create a modified version of it with additional props:

const Button = ({ children, ...props }) => (
  <button {...props}>{children}</button>
);

const App = () => {
  const originalButton = <Button className="original">Click me</Button>;

  // Using React.createElement to create a new button
  const newButton = React.createElement(Button, { className: 'new' }, 'New Button');

  // Using React.cloneElement to clone and modify the original button
  const clonedButton = React.cloneElement(originalButton, { className: 'cloned' }, 'Cloned Button');

  return (
    <div>
      {originalButton}
      {newButton}
      {clonedButton}
    </div>
  );
};

In this example:

• originalButton is created using JSX (equivalent to React.createElement).
• newButton is created from scratch using React.createElement.
• clonedButton is a clone of originalButton with modified props using React.cloneElement.

When comparing React.createElement and React.cloneElement in React, the key difference lies in their purposes.

• React.createElement is used to create a new React element and takes three arguments: the type of the element (like HTML tags or React components), the element’s properties (props), and the element’s children.
• React.cloneElement on the other hand, is utilized to clone an existing React element and modify its properties or children. It allows you to create a new React element based on an existing one with some alterations.

In terms of performance, using cloneElement can be faster than createElement because it only requires instantiating one initial component, making it a clear choice when you have a base component that can be cloned without changes.