The Lure of Inline Functions
The trap is something you’ve likely written dozens of times: passing an inline arrow function or object directly into a component’s props. It looks clean, concise, and perfectly modern. For example: " console.log('Clicked!')} />". This code works flawlessly,
so what’s the problem? The issue isn't functionality; it's identity. In the world of JavaScript, every time your component renders, that inline arrow function is a brand-new, completely distinct function in memory. It’s like photocopying a key instead of using the original; they both open the door, but the lock sees them as different objects. The same logic applies to inline objects, like "
How It Breaks Preact's Optimizations
Preact, like React, avoids unnecessary work by checking if a component's props have changed. If nothing is different, it skips re-rendering that component and its entire child tree. This comparison relies on a concept called referential equality—it checks if the new prop is the exact same object or function as the old one. When you pass an inline function, that check always fails. From Preact's perspective, the `onClick` prop is new on every single render because it's a new function instance. As a result, it assumes the component must have changed and re-renders it, even if absolutely nothing has visually updated. This triggers a cascade of unnecessary updates, consuming CPU cycles and making your app feel sluggish, defeating one of Preact’s core performance benefits.
The Telltale Signs of the Trap
This performance issue is insidious because your application doesn't crash. Instead, it just gets progressively slower, especially in complex UIs with many components. The most common symptom is a laggy interface when state changes. You might notice components flickering in developer tools, indicating they are re-rendering far more often than necessary. If you see a parent component's state update cause a long list of unrelated child components to re-render, you've likely fallen into this trap. It’s particularly costly for components that are themselves expensive to render, like complex charts or data grids. Your app works, but it feels heavy and unresponsive, eroding the snappy user experience Preact is known for.
The Simple Fix: Stable References
Fortunately, the solution is straightforward: ensure functions and objects passed as props are stable between renders. The easiest way to do this is to define them outside of the render path. For functions that don't depend on component props or state, simply define them outside the component itself. For those that do, the `useCallback` hook is your best friend. By wrapping your event handler in `useCallback`, you tell Preact to memoize the function, creating it only once and reusing the same reference on subsequent renders unless its dependencies change. Similarly, for objects, `useMemo` provides the same benefit. Instead of "
