๐ ๐ฎ๐ป๐ฎ๐ด๐ถ๐ป๐ด ๐๐ฟ๐ผ๐ป๐๐ฒ๐ป๐ฑ ๐ฆ๐๐ฎ๐๐ฒ ๐ง๐ต๐ฒ ๐ฅ๐ถ๐ด๐ต๐ ๐ช๐ฎ๐
Stop over-engineering state. Use the simplest tool for your job. Most apps do not need Redux.
Start with local state. Use useState for forms and toggles. Keep state where you use it. This makes your code easy to test.
Use TanStack Query or SWR for server data. These tools handle caching and updates. They remove the need for complex async logic.
Use the URL for filters and search. This lets users share links and refresh pages without losing data.
Use Zustand for global needs. It works for user preferences and themes. It is small and fast.
Follow these rules:
- Do not store derived state. Compute it on the fly.
- Test logic without rendering UI.
- Keep JavaScript bundles under 200KB.
- Prioritize users over developer convenience.
A modern stack:
- React or Vue with TypeScript.
- TanStack Query for server state.
- Zustand for global state.
- Tailwind CSS for styling.
- Vite for building.
- Playwright and Vitest for tests.
Your action plan:
- Run a Lighthouse audit this week.
- Fix accessibility issues this month.
- Build a design system this quarter.