React Stack 2021

Over the last few years, there have been some big changes in React itself, and the ecosystem has evolved quite a bit too.

Here’s where things stand in 2021.

1. React:
   Well isn't that obvious, since we are talking about the React Stack after all. We all know how React has seen a rise in popularity to become one of the most loved front-end frameworks of all time. This also means more developers are building projects in React than ever before.

2. TypeScrpt:
   TypeScript is a typed superscript of JavaScript that compiles to plain Javascript, by using React and TypeScript together we get the benefit of statically typed language for the user interface and also lowering the probability of shipping and bugs to the front-end.

3. React Router:
   React Router is still the dominant router when building medium to large scale Single Page Applications. It is currently up to v5 (almost v6) and the API has changed a bit since earlier versions.

4. Redux:
   State management libraries help us to manage the data in our application. The new official Redux Toolkit is excellent and is the recommended approach to use Redux in 2021. If you are going to use Redux, be sure to check those out.
   Other alternatives available MobX, Recoil and also using React hooks (useContext + useReducer)

5. React Query:
   On the data-fetching front, the strategy of putting everything in Redux or a global store is getting less common. React Query does a good job at fetching data and managing loading/success/error states and we can definitely use both Redux and React Query in the same project. It takes care of maintaining that global data cache across component boundaries without you really having to think about it. Definitely worth a look if you are working with a lot of async data fetching.

6. Chakra UI:
   Chakra UI has an abundance of components and works with the styled system approach which I personally prefer. Another alternative Material UI. Using a component library is a personal choice.

7. React Forms:
   Formik and React Hook Form seem to be the favorites right now, with hook-form gaining steam. Both supports schema-based form validation with Yup where you can pass your schema as an optional config. The form will validate your input data against the schema and return with either errors or a valid result. Formik or React Hook For with Yup validation library is definitely a swiss knife for all things related to forms in React.

8. Jest + React Testing Library:
   When it comes to testing I personally prefer Jest with React Testing Library as my go-to packages and they are in fact recommended by the react official documentation. What is great about react-testing-library is that it encourages you to write tests that resemble the way the users would interact with your software this helps you avoid implementation details.

9. Storybook:
   Storybook is basically a development environment and playground for UI components. It enables you to create components independently and showcase those components interactively in an isolated development environment. When working on projects storybook allows the front-end team to show the components to the stakeholders.

10. Next.js:
    Next Js is a React framework that gives an excellent developer experience with all the features that you would need to build a fantastic application, there is hybrid, static and server-side rendering, Optimized SEO, image caching, TypeScript support, built-in routing, API conventions, and a lot more. It might probably be most if not every React project might be built in the coming years.

Do let me know if I have missed some of them in the comments below.
Thanks for your time reading. Drop a few ❤️ or 🦄 if you like it.