Breakpoint #15
Found some new things in frontend world during my new project at work
🖥️ Frontend Shares
When Your Passion Becomes a Burden
I’ve always tried to make software engineering both my hobby and my work. To this day I still find it fun to write software for my users and other fellow developers. However, I do sometimes find it exhausting having to learn new libraries or new ways to work in the company. Truth be told, it’s reached to a point where I start questioning myself if writing software is meaningful or not. Coding is not everything. There are other things in life that matter. Try to find a balance and make sure this hobby doesn’t become another thing you will hate.
Introducing Valibot, a < 1kb Zod Alternative
Valibot is a new data validation library that is only 0.7 kb. It does what other validation library like Zod can do but achieve a smaller bundle size with its modular design. It contains APIs that are really similar to what TypeScript has so it should be easy for people to pick up.
StackBlitz always has interesting CSS tips I’ve never considered using before. This time is apparently we can use :has to target a sibling that appears before a specific condition.
This is not a typical component library as it’s not a component you can install via npm. Instead it’s a collection of recipes for various components that are composed of radix and tailwind. If you check the code you will notice it doesn’t import from shadcn. These guides should get you 80% of the way when building out your own components and still leave them easily for you to customize them. One thing I find impressive is it shows you how to make a form using React hook form and Zod for data validation.
Fix the slow render before you fix the re-render
In the React world, rendering means React calls your function and generates React components in Virtual DOM then it will reconcile to see what the difference is in the Virtual DOM and finally commit to update the actual DOM to reflect the changes. Some might think that React renders unnecessarily because it updates the actual DOM when it doesn’t need to. React actually only updates the actual DOM if it finds there are differences during the reconciliation step. On top of that, React batches the updates so it doesn’t update every time there’s a state change. If you find your app hangs and causes janky UI, remember Profiler is your friend. Try to find if there are long rendering stages and see if you can optimize it or make use of the new transition and suspense API in React 18.