zebwd
zebwd
TTCTheo's Typesafe Cult
Created by Xanacas on 1/21/2025 in #questions
Typesafe: Is there any better way to write this code?
But also your second function could be written like this and make typescript happier
function calculateSums<T extends {workstreams: {budgetHours: number}[] }>(project: T): T & {budgetUsedHours: number} {

return Object.assign(project, {budgetUsedHours: project.workstreams.reduce((acc: number, workstream) => acc + workstream.budgetHours, 0)})
}
function calculateSums<T extends {workstreams: {budgetHours: number}[] }>(project: T): T & {budgetUsedHours: number} {

return Object.assign(project, {budgetUsedHours: project.workstreams.reduce((acc: number, workstream) => acc + workstream.budgetHours, 0)})
}
TS playground demo
6 replies
TTCTheo's Typesafe Cult
Created by Xanacas on 1/21/2025 in #questions
Typesafe: Is there any better way to write this code?
I go by the idea that performance shouldn't be a worry until it actually becomes a problem, don't fall for premature optimization. Because most of the time for operations like your example the performance impact is negligible. You could run some benchmarks and see the difference and then use your criteria to choose one option or another. Otherwise the more readable the better so option 1 is fine
6 replies
TTCTheo's Typesafe Cult
Created by bobbythebuilder on 1/21/2025 in #questions
Keyboard shortcuts in react
3 replies
TTCTheo's Typesafe Cult
Created by zebwd on 12/29/2024 in #questions
Weirdest bug with RadixUI toast + Framer motion
hmm but if I remove AnimatePresence the exit animation won't work
14 replies
TTCTheo's Typesafe Cult
Created by zebwd on 12/29/2024 in #questions
Weirdest bug with RadixUI toast + Framer motion
not mine but I found his site through github search and seems he followed the same tutorial as me to build the component
14 replies
TTCTheo's Typesafe Cult
Created by zebwd on 12/29/2024 in #questions
Weirdest bug with RadixUI toast + Framer motion
here an example, the second time i want to show a toast I have to click twice and it displays 2 toasts at once, 90% zoom level I see the same in my codesandbox
14 replies
TTCTheo's Typesafe Cult
Created by zebwd on 12/29/2024 in #questions
Weirdest bug with RadixUI toast + Framer motion
happens on chrome and firefox for me, found this site also using the same component, it happens in here for me too when pressing the button in the preview (following steps provided) at any zoom out level below 100% https://kinetic-kit-3zzy.vercel.app/docs/toast
14 replies
TTCTheo's Typesafe Cult
Created by zebwd on 12/29/2024 in #questions
Weirdest bug with RadixUI toast + Framer motion
sorry, updated the link
14 replies
TTCTheo's Typesafe Cult
Created by Jim on 12/18/2024 in #questions
setState mutating initialized object
Hi, by handleGroupNameChange I assume you mean the handleTest function in your code snippet? At first glance I can see you're doing
const updatedPerson = { ...person }
const updatedPerson = { ...person }
This creates a shallow copy of the person state object, by shallow copy I mean it won't copy the nested objects, in this case the meta object So when you do
updatedPerson.meta.foo = e.target.value
updatedPerson.meta.foo = e.target.value
the meta key is still referencing the meta object from the state, and when you mutate the state that way React breaks. You could do this to create a deep copy, then you can mutate it freely:
const updatedPerson = { ...person, meta: {...person.meta} };
const updatedPerson = { ...person, meta: {...person.meta} };
But I would recommend referencing the previous state like this:
setPerson(prevPerson => { ...prevPerson, meta: {...prevPerson.meta, foo: e.target.value }});
setPerson(prevPerson => { ...prevPerson, meta: {...prevPerson.meta, foo: e.target.value }});
you usually want to use spreads to avoid mutating stuff in React One final suggestion, if you want to keep references to certain data inside a component, you can also use Refs, that way you avoid weird syntax: Instead of:
const [prevState] = useState(mockData);
const [prevState] = useState(mockData);
You can use:
const prevPersonRef = useRef(mockData);
const prevPersonRef = useRef(mockData);
I don't even remember where I learned this from other than experience but I think this article explains the shallow copy concept simply https://dev.to/aditi05/shallow-copy-and-deep-copy-10hh
5 replies