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
I finally took a walk. The videos were a disaster as always, but I managed to capture some adorable portraits of this gorgeous little being

* If you need portrait photos in London, call me on 4443434 😄*
Photo of a duck looking at the camera #1 Photo of a duck looking at the camera #2 Photo of a duck looking at the camera #3 Photo of a duck looking at the camera #4
November 17, 2025 at 11:40 PM
alexdln.com
For some reason, I feel like something here could be written more simply...

Nevertheless, I've almost completed an update for viewport tracking, which will allow you to register any element for tracking as quickly as possible
node?.addEventListener("resize", onSizeChangeThrottled); onSizeChangeThrottled(); const unlisten = listen("node", (newNode) => { node?.removeEventListener("resize", onSizeChangeThrottled); node = newNode || null; node?.addEventListener("resize", onSizeChangeThrottled); onSizeChangeThrottled(); }); return () => { unlisten(); node?.removeEventListener("resize", onSizeChangeThrottled); };
November 14, 2025 at 3:48 PM
alexdln.com
Fall magic
A narrow garden path lined with dry, brown, end-of-season plants leads to a tree stump and fallen branches against an old stone wall. The scene looks overgrown and autumnal, with scattered leaves and a few green shrubs among mostly withered vegetation
November 14, 2025 at 2:21 PM
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
It's past midnight, and I've only just finished setting up the "enabled" setting.

Now "contection" and "contection-viewport" have setting for manually controlling when to activate the subscription and re-render. The option for SSR solutions is also available out of the box
const ComponentA = () => { const widthBreakpoint = useViewportWidthBreakpoint(ViewportStore, { enabled: "after-hydration" }); console.log("ComponentA, subscribing to width breakpoint", widthBreakpoint.current); return <div>ComponentA: {widthBreakpoint.current}</div>; }; const ComponentB = () => { const width = useViewportWidth(ViewportStore, { enabled: "after-hydration" }); console.log("ComponentB, subscribing to width", width); return <div>ComponentB: {width}</div>; };
November 14, 2025 at 12:16 AM
alexdln.com
Contection isn't just an optimized state manager. It's the foundation for optimizations across every interaction.

At the same time, I wanted to keep it simple, so I added modules - separate packages for specific tasks! And this is the first of them - contection-viewport
1. Create a Viewport Store import { createViewportStore } from "contection-viewport"; const ViewportStore = createViewportStore({ width: { device: { mobile: 0, tablet: 600, desktop: 1024, }, }, }); 2. Provide the Store function App() { return ( <ViewportStore> <YourComponents /> </ViewportStore> ); } 3. Use the Store import { useViewportWidthBreakpoint } from "contection-viewport"; function ResponsiveComponent() { // Component re-renders only when 'default' breakpoint changes const breakpoint = useViewportWidthBreakpoint(ViewportStore, "default"); return ( <div> {breakpoint.current === "mobile" && <MobileView />} {breakpoint.current === "tablet" && <TabletView />} {breakpoint.current === "desktop" && <DesktopView />} </div> ); } import { useViewportWidth, useViewportHeight } from "contection-viewport"; function Dimensions() { // Component re-renders when width changes const width = useViewportWidth(ViewportStore); // Component re-renders when height changes const height = useViewportHeight(ViewportStore); return ( <div> <p>Width: {width}px</p> <p>Height: {height}px</p> </div> ); }
November 13, 2025 at 2:01 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
Wow, that was a lot harder than I expected. But it was fun and a really good test of Contection's capabilities and weaknesses!
issue-32 implement viewport module #35 Open alexdln wants to merge 6 commits into main from issue-32 +2,880 −34 Conversation 0 Commits 6 Checks 1 Files changed 21
November 13, 2025 at 1:30 PM
alexdln.com
It's so nice to finally have a working idea after a day of work.

I'm testing Contection as a basis for other packages - that should be interesting!
PASS modules/viewport/__tests__/createViewportStore.test.tsx Test Suites: 3 passed, 3 total Tests: 36 passed, 36 total Snapshots: 0 total Time: 7.049 s Ran all test suites related to changed files.
November 12, 2025 at 8:28 PM
alexdln.com
There are already 760 lines in the README... I think it's time to think about a documentation website...
### `Consumer` Component that consumes the store using render props pattern. **Props:** - `children: (data) => React.ReactNode` - Render function - `options?: { keys?: string[], mutation?: Function }` - Optional subscription and mutation options: - `keys?: string[]` - Array of store keys to subscribe to. If omitted, subscribes to all keys. - `mutation?: (newStore, prevStore?, prevMutatedStore?) => T` - Function to compute derived value from subscribed state. Receives: - `newStore` - Current store state (or selected keys if `keys` is provided) - `prevStore` - Previous store state (or selected keys). `undefined` on first call - `prevMutatedStore` - Previous result of the mutation function. `undefined` on first call
November 12, 2025 at 10:39 AM
alexdln.com
In honor of the trailer for the new series, I can't not to share that I recently went into a Disney store for the first time. And when I saw this, I stood there and was as happy as a child 👶
A store display shelf featuring boxed toys of Buzz Lightyear and Woody from Toy Story. On the left are several Buzz Lightyear “Space Ranger” action figures in white and purple packaging, and on the right are Woody “Sheriff” dolls in blue and brown “Woody’s Roundup” boxes.
November 11, 2025 at 8:36 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
I added support for the prevMutatedStore argument, which is the result of the previous call. Is there any way to dynamically type this argument?
const filteredItems = useStore(AppStore, { keys: ["items", "filter"], mutation: (newStore, prevStore, prevMutatedStore) => { // Reuse previous result if filter hasn't changed if (prevMutatedStore && prevStore?.filter === newStore.filter) { return prevMutatedStore; } return newStore.items.filter((item) => item.includes(newStore.filter)); }, });
November 11, 2025 at 1:08 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
When implementing a small improvement resulted in half the types being refactored 🫠

(In fact, writing a file with tests for all type variations was one of the best ideas for a package like this)
A screenshot of the Github changes shows that many lines have been removed in the GlobalStoreConsumer type overloads.. More details at https://github.com/alexdln/contection/pull/28/files#diff-f09367ce42e4a7deddfb5df986db284563dae0359aad0f4ba4a21923746aa992
November 11, 2025 at 10:19 AM
alexdln.com
I'm getting used to writing out all my ideas, as I'm starting to think through more issues in parallel and forgetting about many parts. It's also more public-friendly, which clearly benefits the package 😊
Support prevMutatedStore argument in dispatch callback #27 @alexdln Description In some cases, a mutation will return an object, which will be created anew each time the mutation is called. This means a re-render will occur every time the subscribed keys change, even though the object's contents may remain the same. This issue will add the ability to handle such cases. Users will be able to immediately return prevMutatedStore if the data they need has not changed (similar to working with setState). The issue only concerns scenarios where there is a mutation and it returns an object; in other scenarios, everything is quite optimal.
November 10, 2025 at 9:09 PM
alexdln.com
How complex and complicated any update becomes at some point. It's great that they're coming up with new abstractions instead of creating hundreds of workarounds or crutches to make it work
Fix: Activity should hide portal contents #35091 Merged acdlite merged 2 commits into facebook:main from acdlite:activity-portals-fix 16 minutes ago +245 −57 Conversation 11 Commits 2 Checks 240 Files changed 4 commented 9 hours ago This PR updates the behavior of Activity so that when it is hidden, it hides the contents of any portals contained within it. Previously we had intentionally chosen not to implement this behavior, because it was thought that this concern should be left to the userspace code that manages the portal, e.g. by adding or removing the portal container from the DOM. Depending on the use case for the portal, this is often desirable anyway because the portal container itself is not controlled by React. However, React does own the contents of the portal, and we can hide those elements regardless of what the user chooses to do with the container. This makes the hiding/unhiding behavior of portals with Activity automatic in the majority of cases, and also benefits from aligning the DOM mutations with the rest of the React's commit phase lifecycle. The reason we have to special case this at all is because usually we only hide the direct DOM children of the Activity boundary. There's no reason to go deeper than that, because hiding a parent DOM element effectively hides everything inside of it. Portals are the exception, because they don't exist in the normal DOM hierarchy; we can't assume that just because a portal has a parent in the React tree that it will also have that parent in the actual DOM. So, whenever an Activity boundary is hidden, we must search for and hide any portal that is contained within it, and recursively hide its direct children, too. To optimize this search, we use a new subtree flag, PortalStatic, that is set only on fiber paths that contain a HostPortal. This lets us skip over any subtree that does not contain a portal.
November 10, 2025 at 4:03 PM
alexdln.com
Well, now it’s even more stable and reliable 🧑‍🔧
[Success] Daily auto tests for React Canary Daily auto tests for React Canary #3: Manually run by alexdln main 2 minutes ago 29s [Failed] Daily auto tests for React Canary Daily auto tests for React Canary #2: Manually run by alexdln main 11 minutes ago 25s [Failed] Daily auto tests for React Canary Daily auto tests for React Canary #1: Manually run by alexdln main 20 minutes ago 28s
November 10, 2025 at 3:46 PM
alexdln.com
"A second before jumping"

Morning!
A blurry photo of a golden-brown dog running on green grass in a park, likely about to jump at the photographer, with trees and people visible in the sunny background.
November 10, 2025 at 9:06 AM
alexdln.com
Well, congratulations, Bluesky, on your growth! This is another sign that the platform is growing and developing, which is great.

* I hope all users here know that such messages and links have nothing to do with reality *
Dear user, Your Bluesky access will be paused if safety verification is not completed within 24 hours. This measure is necessary to confirm the integrity of your account. Verify your account within 24 hours to complete verification and restore full access. 🔗 is.gd/**** We appreciate your timely attention to this matter. Sincerely, © Bluesky Security
November 9, 2025 at 10:18 PM
alexdln.com
I finally finished them. Now the magic of Contection is completely covered in tests!
issue-6 add unit tests +6,278 −479 > contection-tests@1.0.0 test /home/runner/work/contection/contection/tests > jest PASS src/unit/__tests__/useStore.test.tsx PASS src/unit/__tests__/consumer.test.tsx PASS src/unit/__tests__/provider.test.tsx PASS src/unit/__tests__/createStore.test.tsx PASS src/unit/__tests__/useStoreReducer.test.tsx Test Suites: 5 passed, 5 total Tests: 57 passed, 57 total it("should re-render only when mutation result changes", () => { let renderCount = 0; const UpdateComponent = () => { const [, update] = useStoreReducer(TestStore); return <button onClick={() => update((prev) => ({ count: prev.count + 1 }))}>Update</button>; }; render( <TestStore.Provider> <TestStore.Consumer options={{ mutation: (store) => (store.count === 2 ? "two" : "not two"), }} > {(result) => { renderCount++; return <div data-testid="result">{result}</div>; }} </TestStore.Consumer> <UpdateComponent /> </TestStore.Provider>, ); expect(renderCount).toBe(1); expect(screen.getByTestId("result")).toHaveTextContent("not two"); act(() => screen.getByText("Update").click()); expect(renderCount).toBe(1); expect(screen.getByTestId("result")).toHaveTextContent("not two"); act(() => screen.getByText("Update").click()); expect(renderCount).toBe(2); expect(screen.getByTestId("result")).toHaveTextContent("two"); });
November 9, 2025 at 9:59 PM
alexdln.com
I thought I needed to develop some additional tools to make Contection compatible with forms. But it seems to already handle it perfectly!
export const FormComponent = () => { const [store, dispatch] = useStoreReducer(ShopStore); return ( <Form> <Input placeholder="Name" /> <Input placeholder="Email" /> <Input placeholder="Phone" /> <Input placeholder="Address" /> <Label> <Checkbox placeholder="Select" onChange={(e) => dispatch({ payBy: e.target.checked ? "credit_card" : null })} defaultChecked={store.payBy === "credit_card"} /> Pay with credit card </Label> <ShopStore.Consumer options={{ keys: ["payBy"], mutation: (newStore) => newStore.payBy === "credit_card" }}> {(payByCreditCard) => ( <Activity mode={payByCreditCard ? "visible" : "hidden"}> <Input placeholder="Credit Card Number" /> <Input placeholder="Expiration Date" /> <Input placeholder="CVV" /> </Activity> )} </ShopStore.Consumer> </Form> ); };
November 9, 2025 at 2:13 PM
alexdln.com
I understand why this is so, but for some reason this react_dev example hurts my eyes.

Maybe I'm too used to working with code outside the main body of a component, and such code somewhere inside feels like it is potentially vulnerable (_but yes, it's not_)
function FriendList({ friends }) { const items = []; // ✅ Good: locally created for (let i = 0; i < friends.length; i++) { const friend = friends[i]; items.push( <Friend key={friend.id} friend={friend} /> ); // ✅ Good: local mutation is okay } return <section>{items}</section>; }
November 9, 2025 at 9:57 AM
alexdln.com
Released! There were a few issues, but fortunately, they were quickly resolved.
As a result - it now covers even more issues than I initially thought!
const AppStore = createStore<AppStoreType>( { user: { name: "", email: "" }, count: 0, theme: "light", windowWidth: 0, }, { lifecycleHooks: { storeDidMount: (store, update, listen, unlisten) => { update({ windowWidth: window.innerWidth }); const handleResize = () => { update({ windowWidth: window.innerWidth }); }; window.addEventListener("resize", handleResize); // Return cleanup function return () => { window.removeEventListener("resize", handleResize); }; }, }, } ); const AppStore = createStore<AppStoreType>( { user: { name: "", email: "" }, count: 0, theme: "light", }, { lifecycleHooks: { storeDidMount: (store, update, listen, unlisten) => { const ws = new WebSocket("wss://example.com"); return () => { ws.close(); }; }, storeWillUnmountAsync: (store) => { fetch("https://example.com/api/sync-state", { method: "POST", body: JSON.stringify(store), }).catch(console.error); }, }, } );
November 8, 2025 at 6:35 PM