finds.dev← search

// the find

gaearon/react-side-effect

★ 1,214 · JavaScript · MIT · updated Mar 2023

Create components whose nested prop changes map to a global side effect

A React higher-order component by Dan Abramov that lets you declare global side effects (document title, body styles, etc.) as regular React components, with proper SSR support via rewind(). It's the foundation react-helmet and react-document-title were built on. Useful if you're building a library that needs this pattern, but not something most apps should reach for directly.

The reduce-then-apply pattern is the right model for nested overrides — innermost wins, and the reducer gives you full control over merge semantics. SSR handling via rewind() after renderToString() is correct and explicit rather than magical. The API surface is tiny: one HOC, one required callback, one optional server callback. Dan wrote it, which means the pattern has been battle-tested across a lot of real React apps.

Last touched in March 2023 and doesn't support React hooks — the HOC pattern it uses is class-component era, and there's no hooks-based alternative here. The rewind()-on-server footgun is real: forget to call it and you get a memory leak and stale state with zero warning. For new projects, react-helmet-async or native document metadata APIs (React 19's <title> support) have made this abstraction mostly redundant. The test suite uses Mocha with a .opts file, which is an archaeology artifact at this point.

View on GitHub →

// want more like this?

We dig through GitHub every week and send a few repos picked for what you actually care about — each with an honest take like this one.

Get finds in your inbox → Search again →