use-context-selector VS formik

Use jotai, or as someone else mentioned, zustand. React Context out of the box requires a very deliberate mental model due to a lack of tooling around selecting slices of state. This is why packages like react-context-selector exist: https://github.com/dai-shi/use-context-selector

Unless I've missed it, context doesn't have selector IIRC. You'd have to use a third party solution useContextSelector

How does this differ from https://github.com/dai-shi/use-context-selector?

you can always split out context state or use a library to help with rerender issues like https://github.com/dai-shi/use-context-selector, or just switch to jotai or something else if you want something more ergonomic or better design patterns.

If you don't want to swap out useContext, you could always use useContextSelector, which helps you limit what props in the context should rerender the component.

I wouldn't call this easy

It wouldn't be clear to anyone learning Context API either. At least, not using official docs. Because Context API is not supposed for state management, and if you for some unknown reasons try to roll your own state management on top of it, you have to use tricky libraries to work around the issues resulting from such abuse.

Any time anything in the context changes, any component that is consuming it will re-render. If you use it for frequently changed values, this library is needed to reduce unnecessary re-renders.

Use of this implementation of useContextSelector

Another technology I use regularly is Redux. But this time I wanted to manage the global state in a simpler and clearer way just using React hooks. I decided to go with a simple useReducer combined with theuseContextSelector hook which will avoid the whole application’s re-render caused by the native useContext hook.

GitHub Repository: https://github.com/formium/formik) Installation:

Additionally, there are more npm packages such as Formik and zod that come equipped with a range of features that can enhance the form validation process.

7. Formik and Yup

Forms are often tricky to get right with React. While there are great libraries like formik or React Final Form to do the heavy lefting for us, handling file upload still isn't always straightforward.

Formik is a well known React library that allows to create forms, manage, and validate their state. It comes with built-in support for Yup, a schema builder for value parsing and validation.

Formik is a small group of React components and hooks for building forms in React and React Native. Formik helps with the three most annoying parts: Getting values in and out of form state. Validation and error messages. Handling form submission. npm i formik

Formik

In the first part of this tutorial, we took a look at how to build React forms with custom HTML elements and form state and logic provided by Formik. In the second part, we switched to Formik components and build form with them. In this final part we will make another change, a small step back.