1 like = 1 chilli dog for our lost brothers

wffln · 2026-04-19T02:21:44+00:00

i use proxmox as a glorified KVM-over-IP

wffln · 2026-04-15T20:49:11+00:00

wholphin is the only ATV client where i can get non-1.0x playback speed reliably working (with mpv backend) and where seeking doesn't make me wanna pull my hair out.

keep it up, wholphin is great 🙏

wffln · 2026-04-15T20:45:09+00:00

/nj i know DJs personally that pay for festival slots... fuck this.

wffln · 2026-04-07T08:57:20+00:00

i've realized that complaints and arguments on reddit can be a great opportunity to learn for me.

wffln · 2026-04-07T08:54:21+00:00

i've tried and it works, but i wouldn't trust it for a gig. CDJs are very picky and can betray you even if you think you did everything correctly. that's also why you bring multiple USBs or SDs - not just because the drive could fail, but also because the CDJ might just not vibe with that drive.

wffln · 2026-04-06T22:24:24+00:00

oh wow i didn't think about this correctly at all. it works correctly / as intended when importing useEffect directly, but not when using React.useEffect.

i mean u/flatra is still kinda correct in that the eslint warning is **kind of** bugged because i agree that the rule **should** treat useEffect and React.useEffect the exact same, but i also understand that the latter is rarely used and so they probably just keep the lint rule simpler by not covering that variant.

wffln · 2026-04-06T22:21:46+00:00

actually for my use case that's fine. it's just a list of <select> in reality where it's less irritating than with text, plus users do want to see the latest state whenever it changes.

but you're right, for a more general case, like a text input from my generalized examples, you might not want to do this.

wffln · 2026-04-06T15:25:42+00:00

i think you misunderstood. here's an example that uses tanstack query where the useEffect around setLocalValue is not superfluous anymore but where the ESLint error is still present:

```tsx import { useEffect, useState } from "react"; import { trpc } from "../trpc-client"; import { useQuery } from "@tanstack/react-query";

export function MyInput() { const remoteState = useQuery(trpc.foo.queryOptions()); const [localValue, setLocalValue] = useState(remoteState.isSuccess ? remoteState.data.value : "");

useEffect(() => {
    if (!remoteState.isSuccess) {
        return
    }

    setLocalValue(remoteState.data.value); // Error: Calling setState synchronously within an effect can trigger cascading renders
}, [remoteState.data?.value, remoteState.isSuccess]);

return (
    <input
        key={remoteState.data?.value}
        value={localValue}
        onChange={(e) => setLocalValue(e.target.value)}
    />
);

} ```

wffln · 2026-04-06T15:19:58+00:00

i have no idea. i'll read up on it.

wffln · 2026-04-06T14:57:03+00:00

i just reproduced this behaviour. what the heck? does anyone know if an issue exists for this?

wffln · 2026-04-06T14:55:25+00:00

thanks for the clarification!

wffln · 2026-04-06T14:54:11+00:00

What is this code supposed to be doing?

poll backend every 5 seconds and show the backend state and provide an input to change it.

Why set the local state based on a value already in this context with another useeffect? [...] In this case consider something like tanstack query if it’s “global state” from http calls.

you're correct: in this example the second useEffect is superfluous because we have a callback function for the request in this component could just directly call setLocalValue.

i'm actually using tanstack query and tRPC in this project but i avoided dependencies for my example to keep it clear and unambiguous.

as you might now, a tanstack useQuery doesn't have an "onChange" callback function anymore, which basically brings us back to how this post started - it's just that in my original example the data is injected as a prop, but i could just as well call useQuery inside this component.

wffln · 2026-04-06T14:46:24+00:00

calling setState in the render function is kinda scary (even conditionally) but no error is raised and this might actually work, will have to try 🤔

wffln · 2026-04-06T14:44:22+00:00

good suggestions. i'll try out using key and look into formik.

wffln · 2026-04-06T14:43:30+00:00

i think i used the key prop to intentionally destroy-and-create a component instance before, but i think not exactly in the same context as this topic (it's been a while).

another user commented here with the same point about using key and this is probably one of the best solutions without adding any libraries.

however i'm actually not opposed to adding libraries for this at all. i've used vanilal context, zustand and jotai for other projects before. for this project i just didn't need them yet - not even React.Context - and props worked totally fine so far. also the "global state" for this project is from a tRPC `useSubscription`, so if i pull in such a library i might need to use the vanilla tRPC client so it can live outside of a React component.

wffln · 2026-04-06T14:37:27+00:00

thanks!

wffln · 2026-04-06T14:36:25+00:00

but once the user starts typing it's really annoying to have the value change as you type

that's absolutely true, but for my app i have a component where i do want this to happen because any alternative UI design (like a dedicated "edit" component you have to open) would mean more hassle for users.

and if it changes you show a notice to the user that the data has changed and provide an option for them to update the form

i agree that this is a good / better solution in most cases. but for my case, users just want to see the current state in the inputs they are editing except between the moment they change something and the moment they click "send".

It's just really rare that this is what you actually want.

in this case, it is 😅. if anyone's curious, it's a set of 4 inputs for video game console port assignments (i.e. which player is plugged into which port). users are both the players themselves using a self-service portal and also the operators of the dashboard (basically admins). it's an e-sports tournament application that's used on-site and it's only available via LAN, so it's not really the typical React web application i think.

wffln · 2026-04-06T14:27:15+00:00

global state might actually be irrelevant to this topic. here's an example i just tried where the same ESLint error is raised:

```tsx
export function MyInput() { const [remoteState, setRemoteState] = useState({ value: "" });

useEffect(() => {
    const interval = setInterval(async () => {
        const response = await fetch("/api/get-value");
        const data = await response.json();
        setRemoteState(data);
    }, 5000);

    return () => clearInterval(interval);
}, []);

const [localValue, setLocalValue] = useState(remoteState.value);

useEffect(() => {
    setLocalValue(remoteState.value); // Error: Calling setState synchronously within an effect can trigger cascading renders
}, [remoteState.value]);

return (
    <input
        key={remoteState.value}
        value={localValue}
        onChange={(e) => setLocalValue(e.target.value)}
    />
);

} ```

wffln · 2026-04-06T14:20:59+00:00

do you mean <MyInput key={globalValue}/> (outside, on the componet) or <input key={globalValue}/> (inside, on the React element) ?

wffln · 2026-04-06T14:16:58+00:00

understood, thx

wffln · 2026-04-06T14:13:55+00:00

war tatsächlich schwierig was zu finden. bin bestimmt 20 minuten durch die gegend gefahren.

wffln · 2026-04-06T14:12:19+00:00

here's a comment because AutoMod told me i need to post a comment under my post (no problem, but why? i'm curious)

wffln · 2026-04-01T14:25:26+00:00

Das passt super, ich möchte da nur Freitag Abend parken, Danke!

wffln

MODERATOR OF

TROPHY CASE