
Unit testing is the superhero of the software development world. Just like a vigilant guardian, it ensures that our code behaves as expected, catching bugs and preventing them from wreaking havoc. Yet, not all unit tests are created equal. Writing good unit tests requires a strategic approach that goes beyond mere code coverage. In this article, we will delve into the art of crafting effective unit tests that are robust, maintainable, and truly unleash the power of reliable code.

## The Power of Effective Unit Tests

Unit tests serve as a safety net, shielding our code from unexpected failures and regressions. When done right, they provide several key benefits:

  1. **Bug Detection**: Unit tests act as detectives, sniffing out bugs before they have a chance to escape into production. By isolating individual units of code and verifying their behavior, unit tests expose flaws that might otherwise remain hidden.

  2. **Code Confidence**: Well-written unit tests instill confidence in our codebase. They serve as living documentation, providing examples of how our code should behave. With each passing test, we gain greater certainty that our code is functioning as intended.

  3. **Refactoring Flexibility**: Unit tests allow us to refactor our code with impunity. By having a suite of tests in place, we can confidently make changes, knowing that if anything breaks, our tests will sound the alarm. This enables us to improve the design, performance, and maintainability of our codebase.

## Anatomy of a Good Unit Test

Now that we understand the importance of effective unit tests, let's dive into the key characteristics that make them shine:
### 1. Focused and Independent:

Good unit tests focus on one specific aspect of the code and are independent of other tests. They isolate the unit under test, avoiding dependencies on external systems or complex setups. This ensures that failures are localized and easily diagnosable.
### 2. Clear and Readable:

Unit tests should be easily understood by both developers and non-technical stakeholders. Utilize descriptive test names that convey the intent and expectations. Well-structured code with proper indentation, comments, and meaningful variable names makes your tests readable and maintainable.
### 3. Comprehensive and Targeted:

While aiming for high code coverage is important, it is equally crucial to focus on meaningful coverage. Prioritize writing tests that target critical and complex parts of your codebase. Think of potential edge cases, invalid inputs, and error scenarios. A comprehensive suite of targeted tests provides greater confidence in your code's correctness.
### 4. Repeatable and Deterministic:

Good unit tests produce consistent results, regardless of the environment or execution order. Avoid relying on external resources, such as databases or network services, unless necessary. Stub or mock out dependencies to create a controlled test environment, ensuring repeatability and deterministic outcomes.
### 5. Fast and Lightweight:

Efficient unit tests run quickly, enabling rapid feedback during development cycles. Avoid unnecessary setup or teardown operations and minimize the use of heavyweight frameworks. By keeping your tests lean and focused, you'll encourage developers to run them frequently, fostering a culture of testing.

## Best Practices for Writing Effective Unit Tests

To truly master the art of unit testing, consider the following best practices:
### 1. Arrange-Act-Assert (AAA) Pattern:

Follow the AAA pattern to structure your tests in a clear and consistent manner. In the Arrange phase, set up the necessary preconditions and inputs. The Act phase executes the code under test, and finally, in the Assert phase, verify the expected behavior and outcomes. This pattern enhances test readability and helps identify any missing steps.
### 2. Mock External Dependencies:

When testing a unit of code, you want to isolate it from external dependencies to focus solely on its behavior. Use mocking frameworks or hand-crafted mocks to simulate the behavior of external components or services. This allows you to control the responses and ensure reliable and predictable test results.
### 3. Test-Driven Development (TDD):

Consider adopting the Test-Driven Development approach, where you write tests before implementing the actual code. TDD helps you clarify your requirements, think through edge cases, and design your code for testability. By following this iterative process, you'll find that your code becomes more reliable, maintainable, and well-structured.
### 4. Test Coverage and Continuous Integration:

Track your test coverage to ensure that critical paths and corner cases are adequately tested. Tools like code coverage reports can help you identify areas with low coverage, enabling you to improve your testing strategy. Additionally, integrate your tests into a Continuous Integration (CI) pipeline to automatically run them with each code change, catching regressions early on.
### 5. Refactor and Maintain Tests:

Just like your production code, your tests need regular maintenance. Refactor your tests to improve readability, eliminate duplication, and remove unnecessary complexity. Keep them in sync with code changes to avoid misleading test failures. As your codebase evolves, ensure that your tests remain reliable guides for the expected behavior.
### 6. Leverage Test Doubles:

Test doubles, such as stubs, mocks, and fakes, are powerful tools for unit testing. Stubs provide canned responses to method calls, mocks verify interactions between objects, and fakes are simplified implementations of external dependencies. Understanding how and when to use these test doubles can help you write more effective and focused unit tests.
### 7. Test Negative Scenarios:

Don't just focus on positive scenarios; test how your code handles invalid inputs, edge cases, and error conditions. By examining how your code responds to unexpected situations, you can strengthen its resilience and uncover potential vulnerabilities. Negative tests provide a safety net against unexpected failures and enhance the overall robustness of your codebase.
### 8. Continuous Learning and Improvement:

Unit testing is an ongoing journey of learning and improvement. Stay updated with the latest testing techniques, tools, and best practices. Engage with the testing community, attend conferences, and explore new approaches to enhance your testing skills. By continuously honing your expertise, you can become a master of writing effective unit tests.

## Conclusion

Unit testing is more than just a chore to check off a list—it's a powerful technique for ensuring code quality, stability, and maintainability. By embracing the principles of focused, readable, comprehensive, repeatable, and lightweight unit tests, you can unleash the true potential of your codebase. Armed with the best practices of arranging, mocking, TDD, coverage, maintenance, test doubles, negative scenarios, and continuous learning, you can write unit tests that inspire confidence and drive your software development process to new heights.

So, let's embrace the superhero within us and make our code robust, reliable, and bug-free through the art of effective unit testing. Happy testing!

> **Note:** This blog post is a guide to writing effective unit tests and not an exhaustive tutorial on specific unit testing frameworks or tools. It aims to provide general principles and best practices that can be applied across various testing environments.

Writing Effective Unit Tests

Enums are a common feature in TypeScript, but they can be a double-edged sword. While enums can provide a clear and concise way to define a set of values, they can also be inflexible and limited in certain scenarios. In this article, we'll explore when to avoid enums in TypeScript and when to use them.

## When to Avoid Enums in TypeScript

### 1. When you need more flexibility

Enums can be a bit inflexible when it comes to handling dynamic values. For example, if you need to generate a set of values dynamically based on some condition, an enum may not be the best choice.
```typescript	
// Example of using an enum for handling dynamic values
enum Color {
  Red = '#ff0000',
  Green = '#00ff00',
  Blue = '#0000ff',
}

function getTextColor(isLightMode: boolean): Color {
  return isLightMode ? Color.Black : Color.White;
}

// This code will not work, as Black and White are not valid enum members
getTextColor(true);
```

In this example, we're trying to use an enum to represent the color of some text based on a boolean value. However, since the enum only defines three specific values, we can't use it to represent dynamic values like `Black` or `White`. In this scenario, it would be better to use a more flexible construct like a union type:

```typescript
// Example of using a union type for handling dynamic values
type Color = '#ff0000' | '#00ff00' | '#0000ff' | 'black' | 'white';

function getTextColor(isLightMode: boolean): Color {
  return isLightMode ? 'black' : 'white';
}
```

By using a union type, we can define a set of values that includes both static and dynamic options.

### 2. When you need more type safety
Enums can also be a bit limited when it comes to enforcing type safety. For example, it's possible to assign an integer value to an enum variable that is not a valid enum member:

```typescript
// Example of assigning an invalid value to an enum variable
enum Fruit {
  Apple,
  Orange,
  Banana,
}

const favoriteFruit: Fruit = 4;

// This code will compile, even though 4 is not a valid Fruit member
```

In this example, we're assigning the value `4` to a variable that is supposed to be of type `Fruit`. However, since `4` is not a valid enum member, this code will compile without any errors. To avoid these types of issues, it's often better to use more robust constructs like union types or literal types:
```typescript
// Example of using a union type to enforce type safety
type Fruit = 'apple' | 'orange' | 'banana';

const favoriteFruit: Fruit = 'pineapple';

// This code will not compile, as 'pineapple' is not a valid Fruit member
```

By using a union type, we can ensure that the variable only contains values from a specific set.

## 3. When you need more runtime flexibility
Enums are static by nature and cannot be modified at runtime. If you need to add or remove values from an enum, you will need to modify the enum definition and recompile your code.
```typescript
// Example of trying to modify an enum at runtime
enum Fruit {
  Apple,
  Orange,
  Banana,
}

// This code will not work, as enums are static and cannot be modified at runtime
Fruit.Peach = 3;
```
Attempting to modify an enum at runtime like in the above example will result in a compilation error. If you anticipate needing to modify values at runtime, you may want to consider alternative options such as using a plain JavaScript object or a Map instead of an enum. This will give you the flexibility to add, remove, or modify values as needed without requiring a recompilation of your code.

### 4. When you need to serialize or deserialize data
Enums can also be problematic when it comes to serializing and deserializing data. Since enums are represented as integers at runtime, it can be difficult to map them back to their original string values.
```typescript
// Example of serializing an enum to JSON
enum Fruit {
  Apple,
  Orange,
  Banana,
}

const favoriteFruit: Fruit = Fruit.Apple;

// This will serialize the enum to the integer value 0
const serialized = JSON.stringify(favoriteFruit);

// This will deserialize the JSON to the integer value 0, not the string 'Apple'
const deserialized = JSON.parse(serialized);
```
In this example, we're trying to serialize an enum to JSON and then deserialize it back to its original value. However, since enums are represented as integers at runtime, the deserialized value will be an integer instead of a string. To avoid these issues, it's often better to use a more flexible construct like a string literal union type:
```typescript	
// Example of using a string literal union type for serialization
type Fruit = 'apple' | 'orange' | 'banana';

const favoriteFruit: Fruit = 'apple';

// This will serialize the string value 'apple'
const serialized = JSON.stringify(favoriteFruit);

// This will deserialize the JSON to the string value 'apple'
const deserialized = JSON.parse(serialized);
```

By using a string literal union type, we can ensure that the serialized and deserialized values remain consistent.

### 5. When you need to optimize for bundle size
Enums can also add unnecessary bloat to your compiled JavaScript code. Since enums are represented as objects at runtime, they can be larger than other constructs like union types or literal types.

```typescript	
// Example of using an enum with a large number of members
enum Color {
  Red = '#ff0000',
  Green = '#00ff00',
  Blue = '#0000ff',
  Yellow = '#ffff00',
  Cyan = '#00ffff',
  Magenta = '#ff00ff',
  Black = '#000000',
  White = '#ffffff',
  Gray = '#808080',
  Maroon = '#800000',
  Olive = '#808000',
  Navy = '#000080',
  Purple = '#800080',
}

// This code will generate a larger JavaScript object at runtime
```

In this example, we're using an enum with a large number of members. However, since enums are represented as objects at runtime, this code will generate a larger JavaScript object than if we had used a more concise construct like a union type or literal type.

## When to Use Enums in TypeScript
While there are some scenarios where enums may not be the best choice, there are also many scenarios where they can be very useful. Here are a few scenarios where enums can be a great choice:

### 1. When you need a fixed set of values
One of the main benefits of enums is that they provide a clear and concise way to define a fixed set of values. This can be useful in scenarios where you need to represent a set of related values:

```typescript
// Example of using an enum to represent different HTTP methods
enum HttpMethod {
  Get,
  Post,
  Put,
  Delete,
}

function sendRequest(method: HttpMethod, url: string) {
  // ...
}
```

In this example, we're using an enum to represent different HTTP methods. By using an enum, we can ensure that only the specific set of methods are allowed.

### 2. When you need to perform runtime lookups
Enums can also be useful when you need to perform lookups based on a specific value. Since enums are represented as objects at runtime, you can use them to perform runtime lookups with ease:

```typescript
// Example of using an enum for runtime lookups
enum Currency {
  USD = 'United States Dollar',
  EUR = 'Euro',
  GBP = 'British Pound Sterling',
  JPY = 'Japanese Yen',
}

function getCurrencyName(currency: Currency) {
  return Currency[currency];
}

console.log(getCurrencyName(Currency.USD)); // 'United States Dollar'
```

In this example, we're using an enum to perform a runtime lookup for a currency name. By using the `Currency` enum as an object, we can easily retrieve the name associated with a specific currency value

### 3. When you need to perform bitwise operations
Enums can also be useful when you need to perform bitwise operations. Since enums are represented as integers at runtime, you can use them to perform bitwise operations with ease:

```typescript
// Example of using an enum for bitwise operations
enum Permission {
  Read = 1,
  Write = 2,
  Execute = 4,
}

const userPermissions = Permission.Read | Permission.Write;

function hasPermission(permission: Permission) {
  return (userPermissions & permission) === permission;
}

console.log(hasPermission(Permission.Read)); // true
console.log(hasPermission(Permission.Execute)); // false
```

In this example, we're using an enum to perform bitwise operations for user permissions. By using the Permission enum as a set of bitwise flags, we can easily check if a user has a specific permission.

### 4. When you need to map values to other values
Enums can also be useful when you need to map a set of values to other values. Since enums are represented as objects at runtime, you can use them to create mappings between related values:

```typescript
// Example of using an enum to map values to other values
enum LogLevel {
  Error = 'ERROR',
  Warning = 'WARNING',
  Info = 'INFO',
}

const logLevelMappings = {
  [LogLevel.Error]: 1,
  [LogLevel.Warning]: 2,
  [LogLevel.Info]: 3,
};

function logMessage(level: LogLevel, message: string) {
  const logLevel = logLevelMappings[level];
  console.log(`[${logLevel}] ${level}: ${message}`);
}

logMessage(LogLevel.Error, 'An error occurred'); // '[1] ERROR: An error occurred'
```

In this example, we're using an enum to create mappings between log levels and integer values. By using an enum, we can ensure that only the specific set of log levels are allowed and easily create mappings between them.

### 5. When you need to define a state machine
Enums can also be useful when you need to define a state machine. Since enums provide a clear and concise way to define a fixed set of values, you can use them to define the different states of a state machine:

```typescript
// Example of using an enum to define a state machine
enum State {
  Idle,
  Loading,
  Loaded,
  Error,
}

function transitionState(currentState: State, nextState: State) {
  // ...
}

transitionState(State.Idle, State.Loading);
```

In this example, we're using an enum to define the different states of a state machine. By using an enum, we can ensure that only the specific set of states are allowed and easily transition between them.

## Conclusion
Enums can be a useful construct in TypeScript, but they're not always the best choice. By understanding when to avoid enums and when to use them, you can write better and more maintainable code.
In general, it's best to avoid enums when you need a flexible and extensible solution or when you need to
perform complex mappings or computations. On the other hand, enums can be useful when you need a fixed set of values that won't change often or when you need to perform simple lookups, bitwise operations, or create state machines.

When working with enums, it's important to keep in mind that they can introduce unnecessary complexity and make your code harder to maintain. If you find yourself using an enum in a way that doesn't fit its intended use case, consider refactoring your code to use a different construct that better fits your needs.
As with any programming construct, the key to using enums effectively is to understand their strengths and weaknesses and use them judiciously. With the guidelines and examples presented in this article, you should now have a better understanding of when to avoid enums and when to use them in TypeScript.

Navigating the Pitfalls of Enums in TypeScript: A Guide to Using Them Effectively

The TypeScript Development Trap You Need to Avoid


GitHub is a web-based platform that has become an essential tool for developers and software teams worldwide. It is mainly used for version control and collaboration, but it has many other applications. In this article, we will explore some of the lesser-known but cool uses for GitHub.

## 1. Host Your Website
GitHub Pages is a powerful web hosting service provided by GitHub that allows you to host your website for free. With GitHub Pages, you can create a website or blog, showcase your projects, or share your ideas with the world.

Creating a website on GitHub Pages is easy. First, you need to create a repository with your website's files. Then, you can choose a custom domain name or use the default domain provided by GitHub. GitHub Pages supports several static site generators, including next.js, astro and svelte, so you can choose the one that fits your needs.

You can also use GitHub Pages to host your documentation, user manuals, or API reference. GitHub Pages is a reliable and secure way to share your documentation with your users and keep it up-to-date.

## 2. Create a Wiki
GitHub wikis are an excellent way to document your projects and share knowledge with your team. You can use Markdown syntax to create pages, add images, and even embed videos. The wiki is also version-controlled, so you can track changes and roll back to earlier versions if needed.

Creating a wiki on GitHub is straightforward. You need to create a new repository and enable the wiki feature. Then, you can start creating pages and adding content. You can also collaborate with your team by granting them access to the wiki.

Wikis are useful for project documentation, user manuals, or FAQs. They are also a great way to share knowledge with your community and encourage contributions.

## 3. Manage Your Tasks
GitHub Issues is a built-in task management system that allows you to create, assign, and track tasks for your projects. You can use labels, milestones, and assignees to organize your tasks and keep track of their progress. You can even use GitHub Actions to automate some of your tasks and workflows.

Creating an issue on GitHub is easy. You need to create a new issue, add a title and description, and assign it to a team member. You can also add labels, milestones, and due dates to your issues to keep them organized.

GitHub Issues is useful for project management, bug tracking, or feature requests. You can use it to prioritize your tasks, track your progress, and communicate with your team.

## 4. Share Your Code
GitHub is the world's largest code-sharing platform, with millions of open-source projects available for anyone to use and contribute to. You can use GitHub to share your code with others, get feedback, and collaborate on projects. You can even use GitHub to showcase your coding skills to potential employers by creating a portfolio of your work.

Creating a repository on GitHub is easy. You need to create a new repository, add your code, and push it to GitHub. You can also add a license, a readme file, and a gitignore file to your repository to make it more user-friendly.

GitHub is useful for open-source development, code reviews, or code sharing. You can use it to collaborate with other developers, get feedback on your code, and build a portfolio of your work.

## 5. Create a Blog
GitHub allows you to create a blog using next.js, astro or other static site generators, a simple and powerful static site generator. All you need to do is create a repository with your blog's files, and GitHub will generate your blog automatically. You can use Markdown syntax to write your posts and customize your blog's theme to match your style Creating a blog on GitHub is a great way to share your ideas, insights, or experiences with the world. You can use your blog to showcase your expertise, build your personal brand, or establish yourself as a thought leader in your field.

With astro, you can create a blog with advanced features such as tags, categories, archives, and RSS feeds. You can also add custom plugins, widgets, and layouts to enhance your blog's functionality and design.

GitHub blogs are easy to manage, maintain, and update. You can use GitHub's version control to track changes to your blog's files and collaborate with other contributors. You can also use GitHub Pages to host your blog for free.

## 6. Manage Your Content
GitHub can be used as a content management system (CMS) to manage your content, including text, images, and videos. You can use GitHub to store and manage your content, collaborate with others, and publish it to your website or blog.

Creating a content repository on GitHub is easy. You need to create a new repository, add your content, and use a static site generator to create your website or blog. You can also use Git LFS (Large File Storage) to manage large files such as images and videos.

Using GitHub as a CMS has many advantages. You can use GitHub's version control to track changes to your content, collaborate with other contributors, and maintain a history of your changes. You can also use GitHub Pages to host your content for free.

## 7. Build and Deploy Your Applications
GitHub can be used as a complete software development platform that includes tools for building, testing, and deploying your applications. You can use GitHub to automate your development workflows, ensure code quality, and deploy your applications to the cloud.

GitHub Actions is a powerful tool that allows you to automate your workflows using pre-built or custom actions. You can use GitHub Actions to build your applications, run tests, and deploy your code to popular cloud platforms such as AWS, Azure, or Google Cloud.

Using GitHub as a software development platform has many benefits. You can use GitHub's collaboration tools to work with your team, track changes to your code, and review pull requests. You can also use GitHub's security features to protect your code from vulnerabilities and attacks.

## Conclusion
GitHub is more than just a version control and collaboration platform. It is a powerful tool that can be used for many cool use cases, including hosting your website, creating a wiki, managing your tasks, sharing your code, creating a blog, managing your content, and building and deploying your applications.

By using GitHub, you can streamline your workflows, enhance your productivity, and collaborate with others more efficiently. Whether you are a developer, a content creator, or a project manager, GitHub has something for you.

Unlocking the Power of GitHub Discovering Unique and Creative Use Cases to Streamline Your Workflow and Boost Your Productivity.

Cool Usecases for GitHub


React is a popular and powerful library for building user interfaces. However, as your application grows, performance can become a bottleneck. One technique for improving React app performance is by utilizing memoization, a technique that helps avoid unnecessary re-renders of components. In this article, we'll dive into when to use React.memo and how it can help boost your app's performance. We'll also discuss potential pitfalls of using React.memo incorrectly.

## What is React.memo?
React.memo is a higher-order component (HOC) that allows you to memoize the result of a component's render function. Memoization is the process of caching a function's output based on its input arguments, so the next time the function is called with the same arguments, it returns the cached result instead of recalculating it.

In the context of React, memoization allows you to avoid unnecessary re-renders of components by caching the component's result when the input props haven't changed. This optimization technique can significantly improve the performance of your React app, especially if you have complex or frequently updated components.

## When to Use React.memo?
Now that we understand what React.memo is let's explore when to use it. Generally, you should use React.memo when:

  - **The component is expensive to render**
  If a component's render function is expensive and produces a large subtree, it's a good candidate for memoization. By memoizing the component, you can avoid unnecessary re-renders and improve the overall performance of your app.

  - **The component renders frequently**
  If a component renders frequently, memoization can help you avoid unnecessary re-renders. For example, imagine you have a list of items, and each item has a button that can trigger a state update. If the list component isn't memoized, each time an item is updated, the entire list will be re-rendered. However, if you memoize the list component, React will only re-render the items that have changed, improving your app's performance.

  - **The component has a large number of props**
  If a component has a large number of props, memoization can help you avoid unnecessary re-renders. When you memoize a component, React will only re-render the component if any of its props have changed. By avoiding unnecessary re-renders, you can improve the overall performance of your app.

## How to Use React.memo?
Using React.memo is straightforward. You wrap your component in the React.memo function call and pass it as the argument. For example:

```javascript
Copy code
import React from 'react';

const MyComponent = React.memo(({ propA, propB }) => {
  // component implementation
});
```
In the example above, we've memoized MyComponent, which takes two props propA and propB. React will compare the input props of the component before rendering it. If the input props haven't changed, React will reuse the previously rendered result.

## Custom Comparison Function
By default, React.memo performs a shallow comparison of the input props to determine whether to re-render the component. However, you can provide a custom comparison function to React.memo to perform a more granular comparison. For example, if your component receives an array of objects as a prop, you might want to provide a custom comparison function to compare the objects' properties instead of the array reference itself.

```javascript
import React from 'react';

const MyComponent = React.memo(({ items }) => {
  // component implementation
}, (prevProps, nextProps) => {
  return prevProps.items.every((item, index) => {
    return item.id === nextProps.items[index].id;
  });
});
```

In the example above, we've provided a custom comparison function to React.memo that compares each object's id property in the items prop.

## Caveats of Using React.memo
While memoization can significantly improve the performance of your React app, it's essential to use it correctly. Here are some potential pitfalls to keep in mind:

- Over-memoization
One common mistake when using React.memo is over-memoization. Memoizing every component in your app can lead to decreased performance instead of improving it. Memoization incurs an overhead cost of storing and comparing the input props, so memoizing a component that renders quickly or infrequently might not be worth the cost.

- Memoizing Impure Components
Another potential pitfall of using React.memo is memoizing impure components. Impure components are components that depend on external state or have side effects, such as making an API call. Memoizing an impure component can lead to unexpected behavior and bugs, as React won't re-render the component when the external state changes or side effects occur.

- Inappropriate Custom Comparison Function
Finally, providing an inappropriate custom comparison function to React.memo can also lead to bugs and unexpected behavior. If your custom comparison function doesn't accurately reflect the component's input dependencies, React won't re-render the component when it should.

## Conclusion
In summary, React.memo is a powerful tool for optimizing React app performance. By memoizing components that are expensive to render, render frequently, or have a large number of props, you can avoid unnecessary re-renders and improve your app's overall performance. However, it's essential to use React.memo correctly and avoid common pitfalls such as over-memoization, memoizing impure components, and providing an inappropriate custom comparison function.

As a senior React developer, you should strive to understand the best practices for optimizing React app performance, and React.memo is an important technique to add to your toolbox. By using React.memo effectively, you can create fast and responsive React apps that provide an excellent user experience.

Maximizing React Performance: When and How to Use React.memo for Optimal Results

boost react performance with react memo: when to use memo


When building a Next.js application, you'll likely find yourself creating shared components and templates that are used across multiple pages. One of the most powerful tools for achieving this is the use of Next.js layouts.

## What are layouts?

Layouts are higher-order components that wrap your page components in shared UI elements like headers, footers, and navigation menus. They're a way to extract common UI elements and stateful logic so that they can be reused across multiple pages.

With layouts, you can define the basic structure of your application once and reuse it across all of your pages. This can be particularly useful when you want to maintain a consistent user experience or when you have complex UI elements that need to be shared across multiple pages.

## The benefits of layouts

There are several benefits to using layouts in your Next.js application:

- **Consistency**: With layouts, you can ensure that your application has a consistent look and feel across all of your pages. This can help to improve the user experience and make your application feel more professional.

- **Reusability**: By extracting common UI elements and stateful logic into layouts, you can reuse them across multiple pages. This can help to reduce code duplication and make your application easier to maintain.

- **Maintainability**: By separating the concerns of layout and content, you can make your code more modular and easier to reason about. This can make it easier to make changes to your application in the future.

- **Performance**: By sharing components across multiple pages, you can reduce the amount of code that needs to be downloaded by the browser. This can help to improve the performance of your application.

- **Shared state**: By using layouts, you can share state between pages. This can be useful for things like maintaining a user's session or storing data that needs to be shared across multiple pages. The state be shared between all pages that are wrapped by the same layout.

## How to use layouts
To use a layout in your Next.js application, you'll need to create a layout component that wraps your page components. Here's an example of a simple layout component:

```tsx
import Header from './Header';
import Footer from './Footer';

const Layout = ({ children }) => (
  <>
    <Header />
    <main>{children}</main>
    <Footer />
  </>
);
export default Layout;

```

In this example, we're creating a layout component that includes a header and a footer. We're also using the children prop to render the content of our page.

To use this layout, we'll need to modify our _app.tsx file. Here's an example of what the modified _app.tsx file might look like:

```tsx
import type { AppProps } from 'next/app';
import Layout from '../components/Layout';

function MyApp({ Component, pageProps }: AppProps) {
  const getLayout = Component.getLayout || ((page) => <Layout>{page}</Layout>);
  return getLayout(<Component {...pageProps} />);
}

export default MyApp;

```

In this example, we're creating a custom MyApp component that wraps all of our page components in our Layout component. We're also defining a getLayout function that can be used by individual pages to define their own layouts.

Using TypeScript with layouts
If you're using TypeScript with Next.js, you may want to create a custom type for your layouts. Here's an example of how you might do that:

```tsx
import type { NextPage } from 'next';
import type { ReactElement, ReactNode } from 'react';

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  getLayout?: (page: ReactElement) => ReactNode;
};
  
``` 

In this example, we're creating a new type called NextPageWithLayout that extends the NextPage type from Next.js. We

Now that we've defined our types and interfaces, let's implement them in our _app.tsx file. First, we need to import our new types and interfaces:

```tsx
import type { AppProps } from 'next/app'
import type { NextPageWithLayout } from '../types/NextPageWithLayout'
```

Next, we need to update our App component to include the layout functionality. We can do this by updating the Component prop to be of type NextPageWithLayout and then calling the getLayout function with the Component and pageProps.children as its arguments:

```tsx
function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  const getLayout = Component.getLayout ?? ((page) => page)
  return <>{getLayout(<Component {...pageProps} />)}</>
}
export default MyApp

```

Here, we're checking if the Component has a getLayout function defined. If it does, we use it to wrap the Component and pass in pageProps.children as the content of the layout. If it doesn't, we simply render the Component without a layout.

With this setup, we can now easily define layouts for our pages by defining a getLayout function in each page's module file:

```tsx
import type { NextPage } from 'next'
import type { NextPageWithLayout } from '../types/NextPageWithLayout'
import Layout from '../components/Layout'

type Props = {
  title: string
}

const Page: NextPageWithLayout<Props> = ({ title }) => {
  return (
    <>
      <h1>{title}</h1>
      <p>This is a page with a layout.</p>
    </>
  )
}

Page.getLayout = function getLayout(page) {
  return <Layout>{page}</Layout>
}

export default Page
```

Here, we're defining a Page component that uses the NextPageWithLayout type we defined earlier. We're also defining a getLayout function on the component that returns the Layout component with the page content as its children.

With this setup, we can easily define layouts for all of our pages and ensure that they are all typed correctly using TypeScript. Additionally, we get the benefits of layouts like shared state and preserved state after page navigation.

## Conclusion

In conclusion, as a developer, I believe that Next.js layouts offer a simple and efficient way to structure your application's layout and manage state in a centralized and scalable manner. They provide a way to abstract away the complexity of managing shared components and state across pages, while also offering a clean and organized codebase. By using Next.js layouts, I have found that I can save time and resources while also improving the overall user experience.

I hope this article has helped you understand the benefits of using Next.js layouts and how to implement them in your projects. Remember, layouts are not a requirement, but they can greatly improve the structure and maintainability of your code. Happy coding!

Streamlining Next.js Development with Layouts Achieving Consistency, Reusability, and Improved Performance

Next.js Layouts Explained


As a senior React developer, I've learned that following certain principles can make a huge difference in the quality and maintainability of my code. In this article, I'm going to share five lesser-known React principles that I believe are essential for building better, more efficient code.

## Keep Your Components Small and Focused

One of the most fundamental principles of React is the idea of breaking down your UI into small, reusable components. However, it's important to also keep these components focused on a single responsibility. In other words, each component should do one thing and do it well.

Why is this important? Well, when you have smaller, more focused components, it makes it easier to reason about your code and to make changes without affecting other parts of your application. It also makes your code more modular and flexible, which can lead to better performance and easier maintenance over time.

## Use PureComponent or Memo for Performance Optimization

React provides two built-in ways to optimize the performance of your components: `PureComponent` and `memo`. Both of these tools are designed to prevent unnecessary renders, which can be a significant performance bottleneck in large or complex applications.

`PureComponent` is a class component that implements a shallow comparison of props and state. This means that if the props or state haven't changed, the component won't re-render. `Memo`, on the other hand, is a higher-order component that works with functional components. It memoizes the result of the component function, so if the props haven't changed, it won't re-render.

By using `PureComponent` or `memo` where appropriate, you can significantly improve the performance of your React application without having to do much extra work.

## Avoid Using Index as Key Prop

When you're rendering a list of items in React, it's important to assign a unique `key` prop to each item. This helps React keep track of which items have changed and need to be re-rendered.

However, it's a common mistake to use the index of the item as the `key` prop. This can lead to performance issues and incorrect behavior in some cases. Instead, you should use a unique identifier for each item, such as an ID or a slug.

By using a unique identifier for each item, you ensure that React can properly track the state and updates of each item, even if the order of the list changes or new items are added or removed.

## Use React Context for Global State Management

Managing global state in a React application can be challenging, especially as your application grows and becomes more complex. One solution to this problem is to use React Context.

Context is a feature of React that allows you to pass data through the component tree without having to pass props down manually at every level. This makes it an ideal solution for managing global state in your application.

By using Context, you can avoid "prop drilling" (passing props down through multiple levels of components) and simplify your codebase. You can also avoid the need for complex state management solutions like Redux in some cases.

## Use React's Built-in Event System

Finally, it's worth noting that React provides its own synthetic event system, which abstracts away the differences between browser implementations. This means that you can use the same event handling code in all browsers, without having to worry about browser quirks.

By using React's built-in event system, you can write cleaner and more portable code, and avoid common issues like cross-browser inconsistencies.

# Conclusion

These five React principles might not be as well-known as some of the others, but they are still incredibly important for building high-quality, efficient React applications. By keeping your components small and focused, using PureComponent or Memo for performance optimization, avoiding using index as key prop, using React Context for global state management, and using React's built-in event system, you can write code that is easier to reason about, maintain, and scale.

As a senior React developer, I highly recommend following these principles, and I hope that they can help you build better React applications as well.



Boosting Your React Development Skills with These 5 Lesser-Known Principles

5 Lesser-Known React Principles That You Should Follow


React is a popular front-end framework that allows developers to build scalable and maintainable web applications. However, building components in React that are both testable and maintainable can be a challenge. In this article, we will explore some best practices for designing React components that are easy to test and maintain.

# Separating Concerns

One of the key principles of building testable and maintainable React components is to separate concerns. Each component should have a clear responsibility and not be overly complex. This means that each component should have a single purpose, and be reusable across different parts of your application.

When designing your components, it’s important to keep in mind the Single Responsibility Principle (SRP). Each component should have a clear and well-defined responsibility, which should make it easier to test and maintain. You don't want to end up with a massive, monolithic component that's difficult to work with and understand. Instead, try to break up larger components into smaller, more focused ones. This not only makes it easier to test and maintain each component, but also makes it easier to reuse them across different parts of your application.

# Dependency Injection

Dependency injection is another best practice for designing testable React components. Dependency injection means passing in dependencies as props rather than relying on global state or accessing them directly.

Passing in dependencies as props makes it easier to test your components in isolation. You can create a mock version of a dependency and pass it in during testing, ensuring that your component behaves as expected. This is especially important when dealing with complex dependencies such as APIs, databases, or third-party libraries. Using dependency injection also helps keep your components decoupled, making them easier to maintain and modify. If a dependency changes, you only need to update the code in one place, rather than throughout your entire application.

# Immutable Data

React encourages the use of immutable data, which means that the data in your application cannot be changed directly. Instead, you create a new copy of the data every time it needs to be updated.

Immutable data makes your components easier to test, as you can be sure that the data your component is working with won’t change unexpectedly. It also makes your components more maintainable, as you can be confident that the data they’re working with is always up to date. Immutable data is particularly useful when dealing with large, complex data structures. It makes it easier to reason about your data and reduces the risk of bugs caused by unintended side effects.

# Stateless Components

Stateless components are another best practice for building testable and maintainable React components. Stateless components do not have any internal state, meaning that their behavior is entirely determined by their props.

Stateless components are easier to test than stateful components, as they have fewer moving parts. They are also easier to reason about, which makes them more maintainable in the long run. However, not all components can be stateless. If a component needs to maintain some state, it’s important to keep that state as minimal as possible, and to make sure that it’s clearly separated from the rest of the component’s logic.

# Accessibility

Ensuring that your components are accessible is an important consideration when building testable React components. Accessibility testing involves ensuring that your application can be used by people with disabilities, such as those who are visually impaired or have limited mobility.

When building accessible components, you should consider how they will be used by people with different abilities. For example, you might need to include alternative text for images, or ensure that all interactive elements can be navigated using a keyboard. By building accessible components, you not only make your application more inclusive, but you also make it easier to test, since accessibility issues are often flagged by automated testing tools.

# Error Handling
A
nother important consideration when designing testable React components is error handling. Your components should be able to handle errors gracefully, without crashing the entire application. This involves using error boundaries to catch and handle errors at the component level, rather than letting them propagate up to the global error handler.

By handling errors at the component level, you can ensure that your application remains stable and continues to function even when errors occur. You can also test error handling scenarios more easily, since you can use mock data to simulate different error conditions and verify that your components respond appropriately.

# Component Composition

Component composition is the process of combining smaller, reusable components to build more complex ones. By composing your components in this way, you can create a more modular and maintainable codebase.

From a testing perspective, component composition makes it easier to isolate and test individual components. Rather than testing a complex, monolithic component, you can test each smaller component in isolation, ensuring that each one works as expected. You can also use mock data to simulate different scenarios and verify that your components behave correctly in different situations.

# Conclusion
In conclusion, designing testable and maintainable React components requires careful consideration of a variety of factors. By separating concerns, using dependency injection, using immutable data, using stateless components, ensuring accessibility, handling errors gracefully, and using component composition, you can build components that are not only testable and maintainable, but also accessible, resilient, and modular. By focusing on these best practices, you can create components that provide value to your application for years to come, while also making it easier to collaborate with other developers and ensure the ongoing success of your project.

Make your React components testable and maintainable by following these best practices.

Designing React Components that are Testable and Maintainable


## What is react-query / tanstack query ?

React Query, now known as the Tan Stack Query, is a powerful tool for managing and fetching data in your React application. It was designed to be lightweight and easy to use, making it a popular choice for developers looking to streamline their data management processes.

One of the main benefits of React Query is its ability to handle data fetching and caching automatically. When you make a request for data, React Query will first check to see if the data is already stored in its cache. If it is, the cached data will be returned immediately, resulting in a much faster response time for the user. If the data is not in the cache, React Query will make a request to the server to fetch the data and then store it in the cache for future use.

Another key feature of React Query is its ability to handle real-time updates to data. When a request is made to update data on the server, React Query will automatically refetch the data and update the cache, ensuring that your application always has the most up-to-date information. This is especially useful for applications that rely on real-time data, such as social media feeds or messaging apps.

One of the more advanced features of React Query is its support for pagination and infinite scrolling. This allows you to load large datasets in smaller chunks, making it easier to manage and reducing the load on your server. It also provides a better user experience, as the user can scroll through data indefinitely without having to manually click through pages.

React Query also makes it easy to handle errors and retries. If a request fails, React Query will automatically retry the request a set number of times before giving up. It will also handle error display for you, making it easy to let the user know if something has gone wrong.

Overall, React Query is a powerful tool for managing and fetching data in your React application. Its automatic caching, real-time updates, pagination support, and error handling make it a great choice for developers looking to streamline their data management processes.

## What problems does react-query solve?

React Query is a tool for managing and fetching data in a React application. It was designed to solve several common problems that developers often encounter when working with data in a React app, such as:

- **Managing data fetching**: Fetching data from an API or other external source can be a complex and error-prone process. React Query makes it easy to fetch and cache data, automatically retrying failed requests and handling error display for you.

- **Real-time data updates**: In many applications, data is constantly changing on the server and it is important to keep the client up to date with the latest information. React Query makes it easy to fetch and update data in real-time, ensuring that your application always has the most up-to-date information.

- **Pagination and infinite scrolling**: When working with large datasets, it is often necessary to split the data up into smaller chunks to make it more manageable. React Query provides support for pagination and infinite scrolling, allowing you to load data in smaller chunks and providing a better user experience.

- **Caching and performance**: Caching data can significantly improve the performance of your application, particularly for data that does not change frequently. React Query automatically caches data and can be configured to cache data for a specific period of time, ensuring that your application is fast and responsive.

Overall, React Query helps developers solve a variety of data management challenges in their React applications, making it easier to build powerful and efficient apps.

## Practical examples of react-query

Here are a few examples of how you might use React Query in your application:

**Infinite scrolling**:

```jsx
import { useQuery } from "react-query";

function App() {
  const { status, data, error, isFetching } = useQuery(
    ["posts", { page: 1 }],
    () => fetch(`https://my-api.com/posts?page=1`).then((res) => res.json())
  );

  const handleScroll = () => {
    if (
      window.innerHeight + document.documentElement.scrollTop !==
      document.documentElement.offsetHeight
    )
      return;

    setPage((prevPage) => prevPage + 1);
  };

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  if (isFetching) return "Loading...";
  if (error) return "An error occurred";

  return (
    <div>
      {data.posts.map((post) => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}
```

In this example, we are using the useQuery hook to fetch a page of posts from an API endpoint. The handleScroll function is used to detect when the user has scrolled to the bottom of the page, and when this occurs, the page number is incremented and a new query is triggered to fetch the next page of data. This allows the user to scroll through an infinite number of pages of data.

**Fetching data**:

```jsx
import { useQuery } from "react-query";

function App() {
  const { status, data, error, isFetching } = useQuery("user", () =>
    fetch(`https://my-api.com/user`).then((res) => res.json())
  );

  if (isFetching) return "Loading...";
  if (error) return "An error occurred";

  return (
    <div>
      <h1>{data.user.name}</h1>
      <p>{data.user.email}</p>
    </div>
  );
}
```

In this example, we are using the useQuery hook to fetch a single user from an API endpoint. The hook handles all of the caching and error handling for us, making it easy to display the data to the user.

I hope these examples give you a good idea of how you can use React Query in your own application. There are many more features and capabilities available, so be sure to check out the documentation for more information.

## Conclusion

In conclusion, React Query is a powerful tool for managing and fetching data in a React application. It simplifies common data management tasks such as fetching, caching, and real-time updates, making it a great choice for developers looking to streamline their data management processes. Its support for pagination and infinite scrolling, as well as error handling and retries, make it a comprehensive solution for data management in React. If you are looking to improve the way you manage data in your React app, React Query is definitely worth considering.


Streamline Your Data Management with React Query

React Query


Amongst us developers there's a strange but strong notion that the most optimal way to do anything is to do it the hard and "classical way". Be it mobile devs that insist that every app has to be written in their respective native language, game devs or software devs that insist garbage collection is horrible and makes you "lazy" as a developer or even web devs that insist you should stick to vanilla javascript and classic CSS and not even think about using something like tailwind or react. It's almost like a badge of honor that they prefer to do things the hard way, the "classical" way. But is it truly better and does it make you a better developer?

## Provide Value to the User

First and foremost our job is to provide value to the end user. Every single piece of software be it Backend or Frontend is at some point or another going to be used by someone. Even if they may not know they are consuming data from your API that cost you multiple weeks to build so that it delivers relevant data to the user at the right time. You are in essence providing that users with a certain value, the only thing that matters in that is that the value the user gets is greater than the value you put into it. 

Here's a good way to look at it, note that this is just one of many examples:

If you've spent 2 weeks building an API that will save 1.000 users even just 2h per week or provide them with just 2h of entertainment. You've essentially turned 2 weeks worth of work hours (roughly 80h) into 4.000h of entertainment or time saved. That's a pretty damn good deal and success metric if you ask me.

The end user will never know if you've used the most optimized way to create that API, they also won't care. Just like they won't care if your app is written in React, Next, Astro(best choice), they also won't care if you used tailwind or plain old CSS. They will only care if the app works and if it provides them with the value they are looking for.

## The Harder Way is not Always Better

If you've spent any time on any social media platform out there, you've probably encountered the type of person who will tell you that you shouldn't use X because it's the lazy or the easy way and should instead do it the hard way first so that you can "learn" from it and have a deeper understanding of the topic.

And that's fine, they're probably right to an extent. Heck I've been that person before. But I think that's also missing the point. If your goal is to learn then yes you probably should first attempt to understand the fundementals before you reach for the helper frameworks, libraries and tools, but if your goal is to get your product or your service out there to the public as soon as possible then you should absolutely use the tools that will help you get there faster. 

Your mission is to maximize the value you provide to the end user with minimal time investment. If you can do that with a tool that is easy to use and understand then you should absolutely use it. 

## Don't take it too far

So obviously we should always be super pragmatic and try to get as much stuff done with the right tools as fast as possible. However try and always be mindful that providing value to the user also means that you deliver a polished and well thought out product to them. Essentially don't get too hung up on making your code as efficient as possible or as optimized as possible as long as it does not affect the end experience of the user. To put it in simpler terms, make sure you deliver good products that are easy and fun to use and won't break every 5 minutes.

## Do take Pride in your Work

However that doesn't mean you shouldn't take pride in your work. I know we all enjoy getting a nice compliment or word of praise from our peers when we've done a good job. It verifies that our efforts have been worth it. However always keep in mind that your peers are not your target audience, your userbase or target userbase is. 

... Unless of course your peers are your target audience then definitely make sure to write clean and well thought out code that is easy to understand and maintain.

Which brings me to my next point

## Move Fast but don't Break Things

I never liked the motto: "Move Fast and Break Things". It fools the reader into believing that if you move fast or deliver your products fast that you are required to break some things along the way. That's not true. We live in a time where we are as developers spoiled for choice with tools that can help us move fast and deliver quality products. We got: Astro, React, Next.js, Svelte, Tailwind, Fastify, Gastby, tRPC, Supabase, Firebase, Railways, MongoDB and so on and so on.

Don't be afraid to use the damn tools that people have built for you. You are trying to convert you time investment into value for the end user and these tools likewise were built with a time investment from their developers to provide value to you. Use them and use them well.

Too often I see twitter threads still berating people for using tailwind by spouting the same old argument that people should just "learn" css. Trust me if someone is using tailwind to any productive extent, they probably know CSS pretty well, better than most.

Same with tools like React, Next, Astro, Svelte, etc. If you're using them you probably know vanilla javascript pretty well. You probably know how to write a simple web app without any of these tools. But developers choose to use these tools because they can help them move faster and deliver better products to their users.

So in essence don't move fast and break things. **Move fast and deliver instead**.

## Conclusion

So in conclusion, don't be afraid to use the tools that will help you get your job done faster and more efficiently. But also don't be afraid to take pride in your work and make sure you deliver a good product to your users.



Is Doing Things the Hard Way Truly Better for Developers?

Harder does not mean better


## TurboPack
So nextConf just happened and they announced a couple of super cool things like TurboPack, a next.js bundler that promises to be a lot faster than vite and insanely faster than webpack. How much faster you may wonder, well according to their announcement it promises to be 10x faster than vite, and 700x faster than webpack.

How much that will actually matter in the real world, I can't say. But it's definitely a step in the right direction and should help you keep those build minutes down on your favorite cloud provider. 

## OG Image Generation
Then there's OG Image generation, which is a super cool feature that I'm already using on my blog. Basically it let's you define a new API route that will act as an image generator. You provide the contents of the image via HTML and CSS and when you call the API route, it returns the image for you. Here's how it works: 

```tsx
// pages/api/og-image.ts
import { ImageResponse } from "@vercel/og";
import { NextRequest } from "next/server";

export const config = {
  runtime: "experimental-edge",
};
export default function ImageGenerator(req: NextRequest) {
  const { searchParams } = new URL(req.url);
  const text = searchParams.get("text")
  return (
    <div
      style={{
        width: 1200,
        height: 630,
        backgroundColor: "white",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <h1>{text}</h1>
    </div>
  );
}

```

Now every time you call the API route, it will return an image with the text you provided in the query parameters.


## File System Routing Extended

Next.js had a file system router from it's very inception, but now that router is getting a huge update. Every directory can have an `index.tsx` or `index.jsx` well that's about to change with next13. They're opting for a more directory based approach with their routing. Basically all your routing will now live in an `app directory` and you define your routes in there by creating a subdirectory for each route. Furthermore you can template out your route with the following files:

- `page.tsx` - the base component that you wish to display on that route e.g `app/home/page.tsx` may contain the home page component
- `layout.tsx` - provides a shared layout for your route and all of it's subroutes
- `loading.tsx` - will be rendered while the page is loading
- `error.tsx` - will be rendered if an error occurs while loading the page

I'm not too sure how I feel about this, as I find that file system routing can quickly grow into a bit of a mess that may be hard to navigate. But luckily you can still use the old file system routing if you wish to do so and adopt the new one procedurally. Which is also a concern if I'm honest since we all know there's plenty of teams out there that will due to time pressure or other unforseen circumstances just get to migrate half of their app to the new file system routing. Which will force them to maintain two different routing systems in the same app. So if you're reading this and getting ready to port everything to the new file system routing, please make sure to schedule enough time for it to fully finish it. Save yourself the headache.

**BUT I've saved the coolest feature by far for last**

## Data Fetching

Now this is the one feature I and many other developers are really excited about, what it means is that you can now simply add async to your component and it will automatically be treated as a react server side component. Meaning that it will be rendered on the server and streamed to the client. This is a huge step forward for next.js and will make it a lot easier to build apps that are fast and performant. Not to mention it will reduce the need for external third party libraries to do this for us such as React Query. How it works is:

```tsx
// pages/index.tsx

export default async function Home() {
  const data = await fetch("https://api.example.com", {
    next: {
      revalidate: 60, // when to revalidate cache in secods
    }
  });
  return (
    <div>
      <pre>
        {JSON.stringify(data, null, 2)}
      </pre>
    </div>
  );
}
```

And there you have it a fully server side rendered component that will be cached for 60 seconds. Without the use of any third party libraries or the `useEffect` hook. This is a huge step forward for Next and I'm really excited to see what the future holds for it and how it will be used in the real world.

**Important Note**
As of right now 27.Oct.2022 you can not use one server side component inside of another without vscode throwing a type error at you. Since a server side component is basically a promise and a promise is not a valid JSX or TSX element. 

## Conclusion

Next.js is evolving and I'm really excited to see what the future holds for it. I'm really looking forward to the next release and I'm sure it will be a lot of fun to work with. I'm also really excited to see how the community will use these new features and what kind of new libraries will be built around them.



Here are my favorite new features, I've left the best for last.

NEXT.JS is evolving


Open source means that anyone can see your work, judge it, judge you or even worse copy your amazing idea, take all the credit and make a lot of money off of your hard work and effort. Why would you ever wanna open source anything? Well, there are a lot of reasons why you should open source your projects. I will try to explain some of them in this post.

## Community Support

One of the biggest benefits of making your work open source is that you'll have access to a large community of people that can help you with your project. They will give you feedback, help you with bugs, provide help with new features, sometimes even directly have a feature PR ready with their issue submission and so on. Usually the kinds of people that want to help you with your projects are users of your product or service. They are the ones that will benefit from your work and they are the ones that will use it. So they are the ones that will be the most interested in helping you with your project.

Which ties nicely into my next point which is

## Open Source can Turbocharge your Learning

Because you will work with others on your project. You'll also get to learn a lot from others. You may be a senior software developer with countless years and successful deployments under your belt, but you can still learn a lot from even the most junior of developers out there. Perhaps someone would tackle a certain problem differently than you, maybe not better maybe not worse, but differently and that may learn from them.

And that's just learning from the submissions of others, then there's the learning from feature requests, bug reports, discussions and so on. Which can give you a substantially better understanding of your users and their needs.

And on that note

## Open Source can Help you Understand your Users Better

One of the biggest pain points of any software developer is marketing or user research. Most don't find enjoyment in these activities. However when your open source project gains popularity you will get a lot of feedback from your users... a lot of feedback. Which will help you understand your users and their needs better. This will of course lead to a more focused and streamlined product/service. 

You don't wanna deliver a swiss army knife to your users when they're really just asking for a toothpick. 

Of course to get to that point you'll have to do a bit of networking and "marketing" yourself. Which leads me to

## Open Source can Help you Network

If you contribute to open source, you'll have to interact with others. If you maintain an open source project, you will have to interact with others. How often do you get the chance to work on the same project as a FAANG engineer? Or the creator of your favorite framework/library. Well with open source you can and as you can imagine, that's a great opportunity to network with people from different backgrounds and skill levels. Sometimes you may even build a lasting friendship with someone you've never met in real life.

Which ties in with

## Collaboration can Fuel Innovation

When you meet people from the open source community and find out about their passions and their passion projects, you may find that your skill sets and interests compliment each other. You may find that you can work together on a project that you both find interesting. And that's a great way to fuel innovation. 

The best ideas and the best projects usually come from two or more likeminded weirdos with a unique interest meeting.

## Better Code

Now this one is pretty far out there, but hear me out okay. I firmly believe that if you open source your code, you will instinctively write better code. 

**Why thought?**

Well it's simple really, everytime you push a commit to your open source project, you're essentially putting your name on it. You're making it a part of your online presence, your identity essentially. 
Now obviously you shouldn't stress too much about being judged by others. To hell with that screw what they think you do you. But we're all human and we all want our creative work to be appreciated and to be seen in a positive light.

So no matter who you are, I'm certain that if you open source your code, you will write better code.

## Financial Reasons

Open source and is a part of the FOSS acronym (Free and **Open Source** Software) and a lot of people hear the word free and think, well there's no money to be made there so why even bother.

However seriously ever heard of Google, Spotify, Facebook? They all offer their services for free and make more money than most B2B enterprise grade software companies.

Now I know bad argument not everyone can be google or spotify, but open source does not mean free. You can earn a good amount of money by doing nothing but open source. In fact you can even earn a living by doing nothing but open source.

If it's your own project this would come in a form of sponsorship or "backing" for your projects, basically users or companies that use your project may want to support you financially so that they may keep using your product or service. Sometimes they may even wish to "donate" so that you can focus on a certain feature that they want to see implemented for their use case.

There are also websites where companies can post "bounties" on open source issues and if someone solves the issue they get paid.

And of course there's the good old fashioned way of selling your product or service. Or even a part of it as a SaaS offering.

Basically you can offer the main part of your product or service for free but charge a fee for certain bundles of features or services. This would be the Spotify or youtube model, they both offer their main service for free but allow you to pay for a more premium experience.

## Backup

This is also a bit of a weird one. But open sourcing your code is a form of backup. If your workstation crashes, harddrive fails, or you simply lose your 2FA code, you can still simply clone your own repository and get back to work. Since after all it is public.

## Can Help you Land a Job

A lot of really good companies such as Mozilla, Microsoft, Google and so on will look at your open source contributions when you apply to work for them and will take that into consideration when deciding whether or not to hire you.

It doesn't even have to be super advanced leet code type stuff. Even just helping out with a small bug or feature, amending documentation, fixing typos, styling etc. can go a long way.

## Conclusion
So there you have it 9 compelling reasons why you should open source your projects. I hope you enjoyed this post and that it helped you in some way. 

## Disclaimer
Now I do have to be fully honest and transparent here, I did make open source sound very positive in this article and many might read it and thing. Wow open source sure is an amazing thing and everyone should do it. However just like in every other thing in life there are also some downsides to open source. One amazing example of the darker side of open source can be seen in the following video by Fireship

[![Fireship - The Dark Side of Open Source](https://img.youtube.com/vi/R6S-b_k-ZKY/0.jpg)](https://www.youtube.com/watch?v=R6S-b_k-ZKY)

Why Open Source is Essential for Community Building and Personal Growth

Open Source your Projects


If you've worked on any react or next.js application in the past, you've probably noticed that it's very unopinionated in general, especially when it comes to how you handle async. Which played a big role in how we've fetched data in our react applications. So far we've either used `useEffect`, `useSWR` or more recently [react-query](https://tanstack.com/query/v4). But now we're getting an exciting new feature in react that will make all things async especially data fetching a lot easier.


## Introducing the use hook
[More info here](https://github.com/acdlite/rfcs/blob/first-class-promises/text/0000-first-class-support-for-promises.md)


Essentially, we're finally getting a native way to handle async functionallity in React. Meaning we don't really need to relly on `useEffect` to fetch our data we can simple create an axios fetch request and wrap it in a `use` hook. 

For example:
```tsx
export const Post = (id:string) => {
  const fetchPost = axios.get(`/api/posts/${id}`));
  const post = use(fetchPost);
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  )
}
```
This will fetch the post data and render it on the page. No `useEffect` required or any other async handling library required. 🎉

## How does the use hook work

Similary to `await` it simply unwraps the value of a promise, meaning that any async behaviour can be wrapped in a use hook now and react will natively handle the promise for us.

## Do we still need react-query then?

Yes, we do. While the use hook is a great addition to react, it's still not a replacement for react-query. The use hook is only meant to handle async behaviour, not caching or any other advanced features. So if you're looking for a more advanced data fetching library, react-query is still the way to go. However it's a step in the right direction for the react team and a welcome addition to the react ecosystem. I can't wait to see what the community does with this new feature. 🤩

## Other interesting stuff of note

Unlike all other hooks the `use` hook appears to support conditional execution. Much like react-query's `enabled` option. This means that we can conditionally fetch data based on some condition. This is of course not supported by other hooks and it appears that the use hook is the only hook will support this. A cool future proposal in the RFC is that we can wrap React Context in a use hook as well. Which would allow us to use context in a more declarative way. Not sure if this will make it into the final RFC but it's an interesting idea.


## Conclusion

This is by far one of the coolest upcoming features in react. I personally can not wait to use it in my next project. I'm sure we'll see a lot of interesting use cases for this new hook. If you're interested in learning more about the use hook, I highly recommend you check out the RFC. It's a very interesting read and it's a great insight into how the react team thinks about new features.



Dayvi Schuster

I write about programming, tech and general stuff.

Recent posts