10.11.0

New Hook: useId

Today we are announcing a new hook: useId. This hook creates stable unique identifiers that are consistent between server-side rendering (using preact-render-to-string) and client-side hydration. The useId() hook is primarily useful for generating identifiers for attributes like aria-labelledby and <label for="...">.

To enable useId() to generate consistent unique identifiers, please ensure you are using preact-render-to-string version 5.2.4 or newer for server-side rendering.

(#3583, thanks @JoviDeCroock)

Fixes

• Fix memory leak by cleaning up _parent, _dom and __hooks after unmount (#3709, thanks @JoviDeCroock)
• Fix case where the ref property could be omitted from reused VNodes (#3696, thanks @JoviDeCroock)
• Pass errorInfo to useErrorBoundary callback (#3689, thanks @marvinhagemeister)
• Fix typescript definition for class | className (#3711, thanks @PodaruDragos)

Maintenance

• Fix the mac arm build (#3697, thanks @gengjiawen)
• Fix published JS formats after #3697 (#3702, thanks @rschristian)
• Add todo benchmark and add a proxy package that uses preact/hooks (#3708, thanks @JoviDeCroock)
• Add deprecation notice to render()'s replaceNode argument (#3700, thanks @rschristian)
• Improve types for bare createElement() and h() calls (#3690, thanks @JoviDeCroock)
• Add test for useId (#3716, thanks @JoviDeCroock)

types

• allow for null return from fc (#3683, thanks @JoviDeCroock)

fixes

• undo jsx-element removal (#3680, thanks @JoviDeCroock)

Fixes

• allow function component with children (#3676, thanks @JoviDeCroock)
• ensure we iterate over all hooks (#3675, thanks @JoviDeCroock)

Fixes

• fix hooks calling shouldComponentUpdate without context (#3671, thanks @developit)
• fix case where we set SCU multiple times (#3670, thanks @JoviDeCroock)
• fix sync-external-store with zustand (#3663, thanks @JoviDeCroock)

Fixes

• fix useSyncExternalStore relying on changed render values (#3655, thanks @JoviDeCroock)
• avoid crashing due to __hooks being null (#3651, thanks @JoviDeCroock)

Bug Fixes

• Fix infinite loop in radix-ui which enqueues multiple state updates in the same tick (#3645, thanks @JoviDeCroock )
• Fix effects run for suspended components in rare instances (#3643, thanks @JoviDeCroock )
• Fix useSyncExternalStore not working with function values (#3633, thanks @marvinhagemeister )
• Defer bailing out of updates to the render phase to align with React (#3621 + #3623, thanks @JoviDeCroock )
• Fix some SVG attributes applied with wrong casing (#3615, thanks @iminside)

Maintenance

• Update esbuild (#3630, thanks @marvinhagemeister )
• Make demo compatible with node 16 and 18 (#3617, @gengjiawen )

Feature


• Microtick —> setTimeout for debouncing renders (mirror change for setTimeout debounce #3608, thanks @JoviDeCroock)

We changed our debounce of our rendering to setTimeout! Why? We've batched using microtasks for the past few major versions because it benchmarked well. This had a side-effect of flushing batched renders between event handlers, which can cause some strange behavior:

<input
      type="checkbox"
      onChange={onChange}
      checked={true}
      onClick={onClick}
/>


An additional benefit of this change is that code causing an infinite rendering loop will no longer result in an unresponsive browser tab. Rendering in a loop is now capped to the browser's maximum timer frequency (~250Hz), which makes it possible to pause and debug the code triggering an accidental loop.

Feature

We are adding support for the newly added React 18 hooks (apart from useId) (#3568, thanks @JoviDeCroock)

FIxes

• Adding types for 'part' attribute (#3595, thanks @rschristian)
• prevent _suspended and _force from colliding (#3585, thanks @JoviDeCroock)

Enhancements

• Add support for svg property shape-rendering (#3577, thanks @DannyvanderJagt)
• Remove setState on unmounted component warning (#3576, thanks @ekwoka)

Fixes

• Fix allow return undefined in useMemo after skipped render (#3580, thanks @marvinhagemeister)
• Fix incorrect useMemo return value after skipped render (#3579, thanks @marvinhagemeister)
• Commit hooks in options.diffed (#3578, thanks @JoviDeCroock)
• restrict "oninputCapture" conversion to just "oninput" vs "oninput*" (#3573, thanks @jramanat-oracle)

Improvements

• Improve unit tests to cover fix on #3573 (#3574, thanks @marconi1992)
• Add _pendingValue to mangle.json (#3575, thanks @marvinhagemeister)