In this post I’ll cover how to add Dark Mode to a JavaScript App. All major frameworks (React, Angular, Vue, etc.) are covered!
How to add Dark Mode to a JavaScript App (React / Angular / Vue / etc)
Tag Archives: react
Getting Closure on React Hooks
Ace talk by Shawn Wang: The design of React Hooks requires a good understanding of closures in JavaScript. In this talk, we’ll reintroduce closures by building a tiny clone of React! This will serve two purposes – to demonstrate the effective use of closures, and to show how you can build a Hooks clone in …
React Hook Form – Form Validation Hook based on Uncontrolled Components
Now this is an interesting approach, building further upon Uncontrolled Components: The React Hook Form (react-hook-form) library provides a new form validation mechanism which embraces uncontrolled form validation and support controlled components. The core idea is to register HTML input’s ref into the custom hook and therefore subscribe to its input value, validate and evaluate …
Continue reading “React Hook Form – Form Validation Hook based on Uncontrolled Components”
Passing Elements as Props in React
I like this nuanced post by David Barral in which he goes over all the options on how to configure a Confirm component: what exactly do you pass in as props. In this story we are going to see a simple technique that allows you to write friendly customizable components with simple APIs, just by …
Manage React State with zustand
Small, fast and scaleable bearbones state-management solution. Has a comfy api based on hooks, that isn’t boilerplatey or opinionated, but still just enough to be explicit and flux-like. import create from 'zustand' const [useStore] = create(set => ({ count: 1, inc: () => set(state => ({ count: state.count + 1 })), dec: () => set(state …
19 Takeaways From React Conf 2019
Solid writeup by Anthony Morris on the recent React Conf. Well React Conf ⚛️ is officially over. There were a lot of great talks, human beings, activities, and of course food. I’m still digesting the whole event but, as far as conferences go, this has been the best one I’ve attended so far. This post …
Build your own React
Rodrigo Pombo: We are going to rewrite React from scratch. Step by step. Following the architecture from the real React code but without all the optimizations and non-essential features. Next to the contents themselves, it’s also presented in a really nice way. As you read along the code next to it also changes. Bret Victor …
React: Fetching data with lifecycle methods, hooks, or suspense — a comparison
Dmitri Pavlutin has compared the several ways to fecthing data in React. Lifecycle methods had been for a long time the only solution to fetching. However fetching using them has problems with lots of boilerplate code, duplication, and reusability difficulties. Fetching using hooks is a better alternative: way less boilerplate code. Suspense’s benefit is declarative …
Continue reading “React: Fetching data with lifecycle methods, hooks, or suspense — a comparison”
One simple trick to optimize React re-renders
Kent C. Dodds: If you’re experiencing React performance issues, try this: “Lift” the expensive component to a parent where it will be rendered less often. Then pass the expensive component down as a prop. You may find doing so solves your performance problem without needing to spread React.memo all over you codebase like a giant …
Continue reading “One simple trick to optimize React re-renders”
Urql – A highly customizable and versatile GraphQL client for React
From the folks at FormidableLabs: urql is a GraphQL client that exposes a set of React components and hooks. It’s built to be highly customisable and versatile so you can take it from getting started with your first GraphQL project all the way to building complex apps and experimenting with GraphQL clients. // App.js import …
Continue reading “Urql – A highly customizable and versatile GraphQL client for React”