With an example of flex gap polyfill — Brief intro of styled-components and flex gap Styled-components is a modern way to add styles to React projects. …

I have been asked this question several times recently: I am using Formik in my React project I want to observe (or listen to) the changes of form values But <Formik> does not provide a prop for onChange callback How do I do that? Well, I would like to share…

So, you got an API and you want to use it in the frontend. How do you process the response data? Are we good to go with a JSON.parse after fetch? I have seen many frontend projects just use whatever the API returns directly without further processing, and I would…

Great, so we both on the same page in regard to the principle of components' responsibility boundary. Now it might be your turn to explain more about why we *have to* do it with pure CSS (and with margin)? Does it sound very dogmatic? …

In React Testing Library, there is no global configuration to change default timeout of waitFor, but we can easily wrap this function to provide our own default values. That is, we can create a waitFor.ts file under test-utils folder as shown below: In this file, we import the original…

Github Repo: https://github.com/zzdjk6/simple-abortable-promise Short Story Truth: a Promise can’t be aborted or canceled. It can only be fulfilled or rejected. Trick: But we can reject a Promise early if we want :) Long Story Let’s face it, we all have the needs to abort or cancel the Promise sometimes. For example, in a single-page…

A real use case of redux-thunk-routine — When dispatching async actions with redux-thunk, we usually have three actions for each thunk: REQUEST, SUCCESS and FAILURE. Imagine we have a thunk to fetch data, we would dispatch FETCH_DATA_REQUEST before we send the API request, then dispatch FETCH_DATA_SUCCESS when the request succeeds or dispatch FETCH_DATA_FAILURE when the request fails. …