DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Last call! Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • The Cypress Edge: Next-Level Testing Strategies for React Developers
  • How to Build Scalable Mobile Apps With React Native: A Step-by-Step Guide
  • Mastering React App Configuration With Webpack
  • Overcoming React Development Hurdles: A Guide for Developers

Trending

  • AI-Based Threat Detection in Cloud Security
  • Performance Optimization Techniques for Snowflake on AWS
  • The Modern Data Stack Is Overrated — Here’s What Works
  • Scalable System Design: Core Concepts for Building Reliable Software
  1. DZone
  2. Coding
  3. JavaScript
  4. Seamlessly Render a Preact Component in a React Project [Livecoding]

Seamlessly Render a Preact Component in a React Project [Livecoding]

Have you ever wanted to render a Preact component inside a React project? It's hard, right? Read on to find out how to get it to work.

By 
Swizec Teller user avatar
Swizec Teller
·
Mar. 13, 18 · Tutorial
Likes (2)
Comment
Save
Tweet
Share
6.1K Views

Join the DZone community and get the full member experience.

Join For Free

Have you ever wanted to render a Preact component inside a React project?

It's hard, right? First of all, why? Because. Second of all, how do you reconcile the two different implementations of JSX?

Preact and React are pretty similar, you see. Both are based on components, both leverage JSX to make your life easier, and for the most part, they look interchangeable.

// React component
import React from 'react' ;
const Header => <h1>I am a header</h1>
// Preact component
import Preact from 'preact' ;
const Header => <h1>I am a header</h1>

Where they differ greatly is what that <h1>I am a header</h1> compiles to. For React, it's a createElement() call. For Preact, it's a h() call.

And that's where the trouble begins.

Reconciling createElement() and h()

I got this idea from Jason himself.

Set your pragma to `h` and conditionally assign h within the scope you want:

/** @jsx h */
import React from 'react'
import { h } from 'preact'

const WithReact = () => {
let h = React.createElement;
return <div>react</div>
}

const WithPreact = () => (
<div>preact</div>
)

- Jason Miller (@_developit) February 26, 2018

Here's how it looks in code:

There are 4 parts to this:

  1. Tell Babel to use h for the JSX function. That's the /** @jsx h */ magic comment at the top.
  2. Import both React and Preact. You'll need both.
  3. Make a Preact component. Or take one from somewhere else. It doesn't matter. Whatever you want!
  4. Create a <Wrapper /> React component.

That <Wrapper /> component is where the magic happens.

The render() method sets h to React.createElement and outputs an anchor div. Setting h ensures that this part of JSX compiles into React's createElement calls. This makes the component integrate seamlessly with the rest of your project.

Then we hook into the component lifecycle with componentDidMount and componentDidUpdate. We call renderPreact in both of them to ensure our wrapper component always ends up rendering Preact.

Same as my React D3 blackbox approach for quickly wrapping D3 code in React components.

In renderPreact, we then use Preact's render() function to render the Preact component into our anchor div. This works the same way as Preact's normal DOM rendering where you call render(<App />, document.getElementById('root')) to put your app into a root div.

The JSX compiles into Preact's h() calls because we didn't mess with the setting, and React refs give us a direct reference to the anchor DOM node.

The Benchmark

You can now compare React and Preact side-by-side in my interactive DOM benchmark. I think it's a fair comparison because Preact handles its own internals.

Numbers are kinda high though. Preact is supposed to be faster than React because it's closer to the metal. I wonder if it's running in dev mode...

React (JavaScript library)

Published at DZone with permission of Swizec Teller, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • The Cypress Edge: Next-Level Testing Strategies for React Developers
  • How to Build Scalable Mobile Apps With React Native: A Step-by-Step Guide
  • Mastering React App Configuration With Webpack
  • Overcoming React Development Hurdles: A Guide for Developers

Partner Resources

×

Comments

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: