Dennis Kats

@denniskats.dev

108 Followers 218 Following

Lead Software Engineer at Deckers Brands. Previously at Meta, Blueport Commerce, and Carbonite. I like to share things that stimulate my brain cells. He/Him. denniskats.dev

A modal showing a site search shortcut for npmx.

A code example showing how Activity + useSyncExternalStore can be used to achieve media query based hydration. The code is as follows:

"use client";

import { Activity, PropsWithChildren as Props, useSyncExternalStore } from "react";
import "./styles.css";

const subscribe = (listener: () => void) => {
window.addEventListener("resize", listener);
return () => window.removeEventListener("resize", listener);
};
const getSize = () => (window.innerWidth < 575 ? "phone" : "desktop");
const getNullOnServer = () => null;

const Breakpoint = ({ size, children }: Props<{ size: "phone" | "desktop" }>) => {
const actualSize = useSyncExternalStore(subscribe, getSize, getNullOnServer);
if (actualSize === null || actualSize === size)
return (
<span className={`hidden ${size}`}>
<Activity>{children}</Activity>
</span>
);
return null;
};

export default function Page() {
return (
<>
<Breakpoint size="phone">
<Logger>Phone</Logger>
</Breakpoint>
<Breakpoint size="desktop">
<Logger>Desktop</Logger>
</Breakpoint>
</>
);
}

function Logger({ children }: { children: string }) {
console.log(`Rendering "${children}"`);
return children;
}

An image of a coin jar with the caption "A quarter a day for a year will get you $9,125". Underneath it is a comment from another user saying "A dollar a day is $365. U got some limited edition quarters or something?"

TypeScript code snippet showing a React component function that handles both Promise and non-Promise values. The function declares a component that accepts a 'value' parameter of type 'MaybePromise<string>', then conditionally resolves the value using React's 'use' hook if it's a Promise.

JavaScript code that demonstrates async/await behavior with non-thenable values. It contains two lines of code followed by their console output. The first line defines and immediately executes an asynchronous function that logs the awaited string 'Hello'. The second line logs the string 'World'. The output shows that 'World' appears first followed by 'Hello', illustrating how awaiting a string still allows the second console.log to execute before the first one.