Easily Implement Undo/Redo Functionality with use-undo Library for React Hooks

Links

• Why useEffect is a bad place to make API calls

  The article discusses two problems related to API calls in React applications. Firstly, when using React's strict mode, the useEffect hook can be called twice, leading to duplicate events. Although a workaround using refs is possible, it is not an elegant solution. Secondly, the useEffect hook runs after the complete rendering of the UI, causing delays in API calls. To address these issues, the article suggests using libraries like React Query, SWR, URQL, or Apollo Client, which provide hooks for parallel data fetching, loading states, error handling, and query invalidation. Alternatively, server-side rendering (SSR) or react-router loaders can be utilized. The article emphasizes the importance of using such libraries to avoid potential errors and improve performance in API calls within React applications.

• Why our company replaced Golang+GraphQL with TypeScript+Prisma+tRPC

  The author shares their company's journey of transitioning from Golang and GraphQL to TypeScript with tRPC and Prisma. They explain that their previous stack involved serverless backend on GCP, GraphQL with gqlgen, gRPC for internal communication, and Pub/Sub for async communication. However, they found the process verbose and tedious for CRUD operations. tRPC, a lightweight library, allows for fully typesafe APIs without schemas or code generation. By using Prisma and tRPC with TypeScript, they can improve code quality, delivery speed, and developer happiness. They are dropping Golang and GraphQL, except for some microservices, and are satisfied with their choices.

Github repositories

• homerchen19/use-undo

  The use-undo library provides undo/redo functionality using React Hooks. It allows you to easily implement undo/redo features in your React applications. By using the `useUndo` hook, you can track and manipulate the state history. The library provides functions such as `set`, `reset`, `undo`, and `redo` to modify the state and navigate through the history. You can also check the availability of undo and redo actions using the `canUndo` and `canRedo` properties. The use-undo library follows a similar concept to Redux's undo history. It is available under the MIT license.