When working with TypeScript projects, especially larger ones, how you structure your imports can significantly impact your code's maintainability and readability. Let's explore some best practices for managing imports in TypeScript.

You've probably seen imports that look like this:

These relative imports have several issues:

Instead, configure your project to use absolute paths. This approach is cleaner and more maintainable:

Prefer named exports over default exports for better refactoring support and explicit imports:

 keyword to make it clear you're importing a type:

Clean import statements might seem like a small detail, but they can significantly impact your codebase's maintainability. By following these practices, you'll create more robust and maintainable TypeScript applications.

These small changes will make your TypeScript code more professional and easier to maintain in the long run.

Learn how to write cleaner, more maintainable TypeScript code with better import practices

Best Practices for TypeScript Imports

Tips for writing "Truly Beautiful" React Code

Note: This article represents my own thoughts and opinions and is not representative of my employer's views.

I started working at Stripe 6 months ago and dove into a massive React codebase. When you have thousands of developers over 10+ years contributing to a codebase, things can get messy. I have seen some truly beautiful React code and some truly "not so beautiful" React code. In this article, I will share some tips for writing "truly beautiful" and (possibly more import) some common pitfalls to avoid.

The goal of this article is to help you write more 

 React code so that future developers (including yourself) can easily understand and modify the code at a later date. Its hard to understand the impact of writing "bad" code in the moment but it can have a huge impact on the future of the codebase.

I before I get into the list its worth noting that for every suggestion there will be a time and place that it makes sense to ignore (I have broken all of these myself at some point). These are not meant to be rules they are guidelines and should raise a flag in your mind when you are breaking them.

Limit the number of props used by a component

When lots of props are passed to a component, it makes it hard to comprehend what the component is supposed to do. This also makes the component harder to test and maintain. If you are passing more than 8(ish) props to a component, you should consider refactoring into multiple components. If you are passing the same props into many components, you should consider using React context.

Use React context (try and avoid prop drilling)

Prop drilling is when you pass props down through multiple layers of components. This can make your code harder to read and maintain. React context is a way to pass data through the component tree without having to pass props down manually at every level. This can make your code cleaner and easier to maintain.

Often when writing React code we want to render components conditionally. A pattern I often see is doing this with 

While these examples are readable using this pattern often leads to hard to read and unmaintainable code. Instead use early returns, this makes the logic more 

Sometimes you will need to break out the early return into a separate component.

As the number of states grow the early return path becomes more readable and maintainable.

Often I see a bunch of hooks at the start of a React component. While at surface level this seems fine, as the number of hooks grows the component becomes harder to read and understand.

For example this is a pretty common pattern

Instead of this pattern consider making a custom hook.

This also has the added benefited of being able to reuse the hook in other components.

Often I see components with methods like 

. I am not sure why folks do this, my guess is it comes from the class component days where it was common to have multiple render_something methods on a class. We have functional components now, so there is no need for renderMethods. Render methods are just bad functional components. React gives us functional components so lets use them how they are meant to be used.

Let's refactor this to a functional component

I hope you found these tips helpful. I have found that following these tips has helped me write more readable and maintainable React code. If you have any tips you would like to share please leave a comment below. I would love to hear them.

This blog post shares practical tips for writing readable and maintainable React code. It covers key practices such as limiting the number of props in components, using React Context to avoid prop drilling, employing early returns for cleaner conditional rendering, creating custom hooks to manage state, and avoiding renderSomething methods in favor of functional components. The goal is to help developers write code that is easier to understand and modify, benefiting both current and future developers.

Next.js has evolved from a static rendering React framework to a dynamic full-stack solution, with features like page.ts and loading.ts for server-side rendering and loading states. Using Suspense, developers can show static content while fetching dynamic data, improving user experience and page performance.

You Need Suspense in Your Next.js App

Nextjs is a meta framework for React. Nextjs includes static site generation, sever site rendering (ssr), api routes, and many other features. We will explore all these ideas and more in this blog.

What is nextjs?

Tips for Writing Truly Beautiful React Code

Next.js is a great framework that I've been using since it was primarily known for static rendering of React applications. Over time, it has evolved into a dynamic full-stack framework.

One feature I always liked about Next.js (and maybe don't love anymore) is the use of 

 files. These make it easy to implement server components and display a loading state while waiting for data to load. However, most of the time, your page comprises both 

Let's look at a common example of a dashboard page:

A couple of things to note in this example:

In this example, Next.js will automatically show a loading spinner while the data is being fetched from the server.

While this setup is functional, it only displays a loading spinner, missing an opportunity to show static content on the page and leaving the user with no context of what's happening.

Naive Solution: Show static content in your loading state

This approach works, but it's not ideal. We're duplicating our page, which can lead to inconsistencies. In our example our page was very simple, but in most "Real World" applications this is almost never the case. Imagine having to duplicate your changes every time you make a change to your 

You might be thinking, "Dude, this is why they added 

". And you're right, this could work. Let's create a 

Again, this achieves the result we want. Issues will come up later when we want to add a "user detail" page (

) to our dashboard and we don't want to wrap it in the 

 but that gets messy fast and is not a great solution for this problem.

The bigger issue comes when we want to add more dynamic content to our user view page. Maybe we want to add a section above the 

 for "Most viewed products". Since we cant have "multiple children" in a layout this would be impossible.

The matter of the fact is there is almost always static content that should not live in a layout but also does not need to wait for the data to load.

This is where React Suspense comes into play. With Suspense, we can display static content while dynamic content is being fetched (server side), enhancing the user experience. Let's refactor our example to use Suspense.

Now, we can provide much more context while the data is being fetched from the server, improving the user experience and making the page feel faster and more responsive

If we look at our example from before where we wanted to add a "Most viewed products" section before the table, we can now do that without any issues.

We can even have separate loading states for each component. This is a huge improvement over the naive solutions we discussed earlier.

If you're not already using Suspense in your Next.js app, I highly recommend giving it a try. It significantly enhances the user experience by making your pages feel faster and more responsive.

How to add an RSS feed for blog posts into a nextjs site. Simple and easy. 

Hi, I'm LoganI enjoy Coding_

Latest Blog Posts

Best Practices for TypeScript Imports

Tips for Writing Truly Beautiful React Code

You Need Suspense in Your Next.js App