Category: React

JavaScript React

GraphQL on the client side with Apollo, React, and TypeScript

Recently, we’ve developed a GraphQL API in our NestJS series. NestJS under the hood uses Apollo Server. Although it is compatible with any GraphQL client, the Apollo platform also includes the Apollo Client. If you want to know more about GraphQL and how to develop a backend with it, check out API with NestJS #27. […]

JavaScript React TypeScript

Building forms with React Hook Form and TypeScript

Handling forms manually is not difficult in React. Keeping all of the code consistent in your project might be quite a hassle, though. There are many ways in which we can tackle the state of our forms and validation. We can expect the approach of our teammates to differ slightly. To manage our forms better, […]

JavaScript React TypeScript

React Context API with hooks and TypeScript

With React, we have quite a few options when it comes to state management. One of the most obvious ones is using the local state. Unfortunately, it might lead to prop drilling. It happens when we pass data from one component through many layers. When some of the components along the way do not need the […]

JavaScript React

Functional React components with generic props in TypeScript

One of the qualities of our code that we should aim for is reusability. Also, following the Don’t Repeat Yourself principle makes our code more elegant. In this article, we explore writing functional React components with TypeScript using generic props. By doing so, we can create reusable and flexible components. If you would like to […]

JavaScript React Testing

JavaScript testing #5. Testing hooks with react-hooks-testing-library and Redux

This entry is part 5 of 18 in the JavaScript testing tutorial

The hooks are an exciting addition to React and undoubtedly one that helps us to separate the logic from the template. Doing so makes the above logic more testable. Unfortunately, testing hooks does not prove to be that straightforward. In this article, we look into how we can deal with it using react-hooks-testing-library. Identifying the tricky […]

JavaScript React

JavaScript design patterns #3. The Facade pattern and applying it to React Hooks

This entry is part 3 of 5 in the JavaScript design patterns

The essential thing when approaching design patterns is to utilize them in a way that improves our codebase. The above means that we sometimes can bend them to fit our needs. The Facade design pattern is commonly associated with object-oriented programming. That doesn’t change the fact that we can take its fundamentals and apply them […]

JavaScript React

Understanding the useEffect hook in React. Designing custom hooks

Hooks are quite a new feature in React. They seem to simplify how we add logic to our components. When I was starting to use them, most of them seemed straightforward. That didn’t apply to the useEffect hook. It might not be that uncomplicated, and therefore, it needs more explanation. In this article, we look into […]

JavaScript React

Current state of the Concurrent Mode in React

React is constantly expanding, and with that process, there are a few cool features coming. One of them is Concurrent Mode. In this article, we go through its principles and discuss its current state. We also look at what the future might bring. The first thing to ask would be: what is the Concurrent Mode? […]

JavaScript React

Writing React forms with Formik. Validating data using Yup

Writing a React form without any additional dependencies isn’t much of a challenge itself. The same goes for applying client-side data validation. What might be troublesome is keeping all your forms consistent across a bigger project. If every developer in your team has a slightly different approach, it may turn out to be messy. With […]