Alex
LightNews LightNews
banner
alexdln.com
Alex
@alexdln.com
380 followers 380 following 1.1K posts
Web Engineer, Author, Contributor, Photographer
Frontend/React/Next.js/UX/DX/Сapybara/Performance/Growth

🔨 Building slidebook.dev | atsky.app | robindoc.com | nimpl.dev
🏡 Living alexdln.medium.com | github.com/alexdln
Posts Replies Media Videos
alexdln.com
_And apparently the react compiler does exactly that. I don't know why I didn't think of him right away_
React Optimizing Compiler We gave an early preview of React Forget at React Conf 2021. It’s a compiler that automatically generates the equivalent of useMemo and useCallback calls to minimize the cost of re-rendering, while retaining React’s programming model. Recently, we finished a rewrite of the compiler to make it more reliable and capable. This new architecture allows us to analyze and memoize more complex patterns such as the use of local mutations, and opens up many new compile-time optimization opportunities beyond just being on par with memoization Hooks.
November 14, 2025 at 10:53 AM
alexdln.com
...How can I simplify the decomposition?What if I have local state, but only a small element on the page depends on it?

useState, will trigger a check for all elements. Contection, on the other hand, solves this, but it requires creating a Provider at a higher level.
November 14, 2025 at 10:44 AM
alexdln.com
...Contection allows you to trigger a re-render at the exact point, skipping all other layers. The compiler, on the other hand, optimizes each layer to ensure optimal re-rendering. This speeds up the process without requiring any additional effort. And this is the question I'm asking myself now...
November 14, 2025 at 10:44 AM
alexdln.com
I shouldn't get carried away with new ideas - it always ends badly...

But I sincerely believe that this is the path React development should take!
November 14, 2025 at 12:18 AM
alexdln.com
Now you can subscribe to:
- width or height,
- breakpoint changes (width or height),
- relative changes (eg larger than lg);

Or use current viewport information without re-rendering at all.

And all this is built on a single resize observer, optimized and accelerated
contection/modules/viewport at main · alexdln/contection
A state management library that extends React Context API with fine-grained subscriptions and computed values - alexdln/contection
github.com
November 13, 2025 at 2:05 PM
alexdln.com
Testing in a real project...
ComponentB, subscribing to width 1440 forward-logs-shared.ts:95 ComponentB, subscribing to width 1440 forward-logs-shared.ts:95 ComponentB, subscribing to <= lg false forward-logs-shared.ts:95 ComponentB, subscribing to <= lg false forward-logs-shared.ts:95 ComponentA, subscribing to width breakpoint xl forward-logs-shared.ts:95 ComponentA, subscribing to width breakpoint xl forward-logs-shared.ts:95 ComponentB, subscribing to width 1438 forward-logs-shared.ts:95 ComponentB, subscribing to width 1438 forward-logs-shared.ts:95 ComponentB, subscribing to width 1435 forward-logs-shared.ts:95 ComponentB, subscribing to width 1435 forward-logs-shared.ts:95 ComponentB, subscribing to width 1383 forward-logs-shared.ts:95 ComponentB, subscribing to width 1383 forward-logs-shared.ts:95 ComponentA, subscribing to width breakpoint lg forward-logs-shared.ts:95 ComponentA, subscribing to width breakpoint lg forward-logs-shared.ts:95 ComponentB, subscribing to width 1258 forward-logs-shared.ts:95 ComponentB, subscribing to width 1258 forward-logs-shared.ts:95 ComponentB, subscribing to <= lg true forward-logs-shared.ts:95 ComponentB, subscribing to <= lg true forward-logs-shared.ts:95 ComponentA, subscribing to width breakpoint md forward-logs-shared.ts:95 ComponentA, subscribing to width breakpoint md forward-logs-shared.ts:95 ComponentB, subscribing to width 1004 forward-logs-shared.ts:95 ComponentB, subscribing to width 1004 forward-logs-shared.ts:95 ComponentB, subscribing to width 866 forward-logs-shared.ts:95 ComponentB, subscribing to width 866 forward-logs-shared.ts:95 ComponentB, subscribing to width 790 forward-logs-shared.ts:95 ComponentB, subscribing to width 790 forward-logs-shared.ts:95 ComponentA, subscribing to width breakpoint sm forward-logs-shared.ts:95 ComponentA, subscribing to width breakpoint sm
November 13, 2025 at 1:41 PM
alexdln.com
Well, I can understand when it's just another startup, but @github.com, how?
A screenshot of the GitHub PR creation interface, where an extra scrollbar appears at the bottom of the page.
November 11, 2025 at 6:24 PM
alexdln.com
And this is the file that allows to control all such changes and guarantee the reliability of their typing
// interface TestStore { // count: number; // name: string; // user: { // id: number; // email: string; // }; // theme?: "light" | "dark"; // items: string[]; // } // Update should accept partial store update({ count: 1 }); update({ name: "New", theme: undefined }); // @ts-expect-error - should not accept undefined value if it was not defined in the store update({ name: "New", items: undefined }); update({ name: "New", items: [] }); update((prev) => ({ count: prev.count + 1 })); // @ts-expect-error - should not accept invalid key update({ invalidKey: "value" }); // @ts-expect-error - should not accept undefined value if it was not defined in the store update((prev) => ({ count: prev.count + 1, items: undefined })); update((prev) => ({ count: prev.count + 1, items: [] }));
November 11, 2025 at 1:05 PM
alexdln.com
These simple checks make updates and optimization much easier, and also provide strong protection against accidental generic breakage
// Test 4: useStore with keys function testUseStoreWithKeys() { const data = useStore(Store, { keys: ["count", "name"] }); // Should return only selected keys const count: number = data.count; const name: string = data.name; // @ts-expect-error - should not have unselected keys const user = data.user; // @ts-expect-error - should not accept invalid keys const invalid = useStore(Store, { keys: ["invalidKey"] }); } // Test 5: useStore with mutation function testUseStoreWithMutation() { // Mutation without keys const doubled = useStore(Store, { mutation: (Store) => Store.count * 2, }); const doubledType: number = doubled; // Mutation with keys const computed = useStore(Store, { keys: ["count", "name"], mutation: (Store) => `${Store.name}: ${Store.count}`, }); const computedType: string = computed;
November 11, 2025 at 10:22 AM
alexdln.com
Just in case, I will translate it into another language so that more people can understand.

Broken scrollbars have become too common problem 🫠
This is what happens when the entire company is Apple-powered...

* Please don't use w-screen within a scrollbar element, use w-full *
November 10, 2025 at 9:35 PM