React vs Preact Differences

function handleClick(e) {
  // e is a SyntheticEvent wrapper
  e.persist(); // Needed to access event async
  setTimeout(() => {
    console.log(e.type); // Works in React
  }, 100);
}

function handleClick(e) {
  // e is a native Event
  // e.persist() is a no-op (see compat/src/render.js:100)
  setTimeout(() => {
    console.log(e.type); // Works in Preact
  }, 100);
}

// These are automatically converted by the compat layer:
<input onChange={handler} />     // → oninput (for text inputs)
<input onDoubleClick={handler} /> // → ondblclick
<input onFocus={handler} />       // → onfocusin  
<input onBlur={handler} />        // → onfocusout

// Both work in Preact:
<div className="foo" />
<div class="foo" />

class MyComponent extends Component {
  // Both of these work:
  componentWillMount() { }
  UNSAFE_componentWillMount() { }
  
  componentWillReceiveProps(nextProps) { }
  UNSAFE_componentWillReceiveProps(nextProps) { }
  
  componentWillUpdate(nextProps, nextState) { }
  UNSAFE_componentWillUpdate(nextProps, nextState) { }
}

import { useTransition, useDeferredValue } from 'react';

function MyComponent() {
  const [isPending, startTransition] = useTransition();
  // isPending is always false
  // startTransition executes immediately
  
  const deferredValue = useDeferredValue(value);
  // Returns the value immediately (no deferral)
}

import { flushSync } from 'react-dom';

// In React: Forces synchronous render
// In Preact: Just executes the callback (compat/src/index.js:132)
flushSync(() => {
  setState(newValue);
});

import { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./Component'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

import { render } from 'react-dom';

const instance = render(<App />, container);
// instance is the root component (or null for functional components)

const container = document.getElementById('root');
container.innerHTML = '<div>This will be cleared</div>';

// First render clears the container
render(<App />, container);

import { hydrateRoot } from 'react-dom/client';
// or legacy:
import { hydrate } from 'react-dom';

hydrate(<App />, container);

// If value is null/undefined, defaultValue is used
<input value={null} defaultValue="fallback" />
// Renders with value="fallback"

// These are converted automatically:
<svg>
  <text textAnchor="middle" />      {/* → text-anchor */}
  <path strokeWidth={2} />           {/* → stroke-width */}
  <circle fillOpacity={0.5} />       {/* → fill-opacity */}
</svg>

<div style={{ 
  width: 100,        // → "100px"
  height: 200,       // → "200px"
  flex: 1,           // → "1" (unitless)
  opacity: 0.5,      // → "0.5" (unitless)
  zIndex: 10         // → "10" (unitless)
}} />

// In React and Preact/compat:
<a href="/file" download={true} />
// Renders as: <a href="/file" download="">

import { PureComponent } from 'react';

class MyComponent extends PureComponent {
  render() {
    // Only re-renders if props or state shallowly differ
    return <div>{this.props.value}</div>;
  }
}

import { memo } from 'react';

const MemoizedComponent = memo(MyComponent, (prevProps, nextProps) => {
  // Return true if props are equal (skip render)
  return prevProps.id === nextProps.id;
});

import { forwardRef } from 'react';

const MyInput = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

import { Children } from 'react';

function Parent({ children }) {
  const count = Children.count(children);
  const array = Children.toArray(children);
  
  Children.forEach(children, (child, index) => {
    console.log(child, index);
  });
  
  const mapped = Children.map(children, (child) => {
    return cloneElement(child, { key: child.key });
  });
  
  const only = Children.only(children); // Throws if not exactly one child
  
  return <div>{children}</div>;
}

import { StrictMode } from 'react';

// In Preact, this just renders children without any checks
<StrictMode>
  <App />
</StrictMode>

import { isValidElement } from 'react';

const element = <div />;
isValidElement(element); // true
isValidElement('string'); // false
isValidElement(null); // false

import { findDOMNode } from 'react-dom';

class MyComponent extends Component {
  componentDidMount() {
    const node = findDOMNode(this);
    // node is the DOM element
  }
}

import { unmountComponentAtNode } from 'react-dom';

const container = document.getElementById('root');
render(<App />, container);

// Later:
const didUnmount = unmountComponentAtNode(container);
// didUnmount is true if a component was unmounted

import { useInsertionEffect } from 'react';

// In Preact, this behaves like useLayoutEffect
useInsertionEffect(() => {
  // Insert styles, etc.
}, []);

import { useSyncExternalStore } from 'react';

function useStore(store) {
  return useSyncExternalStore(
    store.subscribe,
    store.getSnapshot
  );
}

import { renderToString } from 'react-dom/server';

const html = renderToString(<App />);

// Not supported in Preact:
'use server';
'use client';

// Preact provides a partial implementation at compat/src/render.js:303
import { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED } from 'react';

// Some internals are provided for library compatibility,
// but not all React internals are available