
## 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.


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.



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.



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)

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.



React Just Got Even More Awesome


Tired of writing the same auth code over and over again every time you start a new project? Let's build a simple authentication system using React Context. This way we can easily reuse it in all our projects, completely independat of the state management library we use. 

## Why React Context and not Redux, recoil, zustand...

React Context is a very powerful tool, but it's not the only tool in the shed. There are a lot of other state management libraries out there that can do the same thing. So why use React Context? Well, it's simple really. React Context is built into React, it's a native feature. This means that we don't need to install any third party libraries to use it. This also means that we can use it in any React project, even if we're not using any other state management library.

In fact handling auth is a damn near perfect candidate for react context, because by it's very nature it belongs in a global application state and we don't expect it to change very often.

## What we're going to build

We're going to build a very simple authentication system with react context and react hooks that will allow us to: 
- Store the user's information in the context and local storage
- Check if the user is logged in
- clear the user's information from the context and local storage
- retrieve the user's information from the context and local storage

**WE WILL NOT** build a fully fledged authentication system with login, logout, registration, etc. We will only build the frontend part, meanig the part that will allow our frontend to know if the user is logged in or not and react accordingly, meaning we will **not**:
- send the user's credentials to the backend
- verify the user's credentials
- store the user's credentials in the backend

I'll assume you're already familiar with React and TypeScript, I'll also assume you've already have a react or next.js app set up. If you don't, use [create-react-app](https://create-react-app.dev/), [create-next-app](https://nextjs.org/docs/api-reference/create-next-app) or even [t3-app](https://github.com/t3-oss/create-t3-app) to get started.


## Step 1: React Hooks

Let's start off by creating a couple of custom hooks that we'll require for out auth system, first create a directory called `hooks` in your `src` directory then create the following files in there:
- `useAuth.ts`
- `useUser.ts`
- `useLocalStorage.ts`
  
### useLocalStorage.ts

This hook will allow us to easily store and retrieve data from localStorage. It's a very simple hook, but it's a good idea to keep it in a separate file so we can reuse it in other parts of our application.

```tsx
import { useState } from 'react';

export const useLocalStorage = () => {
  const [value, setValue] = useState<string | null>(null);

  const setItem = (key: string, value: string) => {
    localStorage.setItem(key, value);
    setValue(value);
  };

  
  const getItem = (key: string) => {
    const value = localStorage.getItem(key);
    setValue(value);
    return value;
  };

  const removeItem = (key: string) => {
    localStorage.removeItem(key);
    setValue(null);
  };

  return { value, setItem, getItem, removeItem };
};
```

### useUser.ts

This hook will store the user in our context and localStorage.

```tsx
import { useContext } from 'react';
import { AuthContext } from '../context/AuthContext';
import { useLocalStorage } from './useLocalStorage';

export interface User {
  id: string;
  name: string;
  email: string;
  authToken?: string;
}

export const useUser = () => {
  const { user, setUser } = useContext(AuthContext);
  const { setItem } = useLocalStorage();

  const addUser = (user: User) => {
    setUser(user);
    setItem('user', JSON.stringify(user));
  };

  const removeUser = () => {
    setUser(null);
    setItem('user', '');
  };

  return { user, login, logout };
};
```

### useAuth.ts

This is the hook where it all comes together. This react hook will be responsible for checking if the user is logged in or not, and if they are, it will return the user object. If the user is not logged in, it will return null.
We'll also expose a `login` and `logout` function that we can use to log in and log out the user.

```tsx
import { useEffect } from 'react';
import { useUser } from './useUser';
import { useLocalStorage } from './useLocalStorage';

export const useAuth = () => {
  const { user, addUser, removeUser } = useUser();
  const { getItem } = useLocalStorage();

  useEffect(() => {
    const user = getItem('user');
    if (user) {
      addUser(JSON.parse(user));
    }
  }, []);

  const login = (user: User) => {
    addUser(user);
  };

  const logout = () => {
    removeUser();
  };

  return { user, login, logout };
};
```

## Step 2: React Context

Now that we have our hooks ready, let's create our context. Create a directory called `context` in your `src` directory and create a file called `AuthContext.tsx` in it.

```tsx
import { createContext } from 'react';
import { User } from '../hooks/useUser';

interface AuthContext {
  user: User | null;
  setUser: (user: User | null) => void;
}

export const AuthContext = createContext<AuthContext>({
  user: null,
  setUser: () => {},
});
```

## Step 3: Wrap your app in the context provider

Now that we have our context ready, let's wrap our app in it. Open your `App.tsx` file and wrap your app in the context provider.

```tsx
import { AuthContext } from './context/AuthContext';
import { useAuth } from './hooks/useAuth';

const App = () => {
  const { user, login, logout } = useAuth();

  return (
    <AuthContext.Provider value={{ user, setUser }}>
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    </AuthContext.Provider>
  );
};

export default App;
```

## Step 4: Create a login page

Now that we have our context ready, let's create a login page. Create a directory called `pages` in your `src` directory and create a file called `login.tsx` in it.

```tsx
import { useAuth } from '../hooks/useAuth';

const Login = () => {
  const { login } = useAuth();

  const handleLogin = () => {
    login({
      id: '1',
      name: 'John Doe',
      email: 'john.doe@email.com',
    });
  };

  return (
    <div>
      <h1>Login</h1>
      <button onClick={handleLogin}>Login</button>
    </div>
  );
};

export default Login;
```

## Step 5: Create a logout button

Awesome now we have a login page all there's missing is a way to log out, let's create a logout button. Create a file called `LogoutButton.tsx` in your `src` directory.

```tsx
import { useAuth } from '../hooks/useAuth';

const LogoutButton = () => {
  const { logout } = useAuth();

  return <button onClick={logout}>Logout</button>;
};

export default LogoutButton;
```

## Further steps

Now that we have our helpful hooks and context ready all we need to do is use them in our application, for example we can call our `useAuth` hook in our `App.tsx` to check if the user is logged in or not, if not we can redirect the user to the login page. We can also conditionally render the logout button based on whether the user is logged in or not.

All of this is completely independant from any and all state management libraries.


### A note on localStorage

I've used localStorage in this example, but you can use any other storage mechanism you want. For example, you can use cookies The only thing that matters is that you store the user object in a way that you can retrieve it later.
Additionally you should also probably encrypt the user object before storing it in localStorage, but that's out of the scope of this article. Also you should probably allow the user select if they wish to persist their login after leaving the page or not.

**IMPORTANT** This is not a secure way to store user data, it's just a simple example to show how you can use react hooks to create a simple authentication system. You should optimally use a secure authentication system like JWT or OAuth, but that's out of the scope of this article.

## Conclusion

In this article we've learned how to create a simple authentication system using react hooks and context. We've also learned how to persist the user object in localStorage so that the user doesn't have to log in every time they visit the page.


Dayvi Schuster

I write about programming, tech and general stuff.

Recent posts

React Query

Harder does not mean better

NEXT.JS is evolving

Open Source your Projects

React Just Got Even More Awesome

Use React Context for Auth

There's more

Subscribe to my newsletter