I never really created my own loading and error handling before without using React query. I know you can achieve the loading and error state using 

 method is also great when you want to accomplish this loading and error state for your UI.

React-query has a lot of great lifecycle methods, but I usually use the 

 methods ). There are lot more state to use actually but these 3 will do for achieving the loading and error state you want for your UI.

A query can only have 3 states pending, success and error. 

Here’s how you would do it ( a straightforward use )

So very straight forward as I said, you can get the 

 from your fetching method. Then just use them to generate your component as such.

 if your fetching is still in progress or not.

 to check if your API fetching returns an error.

Sometimes our internet and server fail us and we want something to show users that there’s a delay in “loading” or there is an error on the data that they want to see. So with react-query lifecycle method can help us make sure that we make it so.

I never really created my own loading and error handling before without using React query.

React Query Basic: Query Lifecycle

I’ve been using React Query for some time now but didn’t really understand it as I’ve used my old company project code in React Query and used it on my other projects without knowing why the code does that. This time I tried learning it through the documentation and courses. ( Yes I bought a course so sue me! )

In a way, I somehow got it now. So writing this so that in the future ( because I’m old and forget things a lot ) I will refer to this. And this will be a series like the React Typescript that is not yet finished 😅

Combining useState, useEffect, and Context together in an attempt to “manage” state will lead to pain and suffering.

Manage server state without doing a lot of work 😉.

And of course, React Query can handle this for you

React Query is NOT a data fetching library

React-query is an async state manager that is also acutely aware of the needs of the server state.

React Query doesn't fetch data for you, instead, you provide it with a promise and it will then take the data that the promise resolves with and make it available wherever you need it on your application.

wrapping your MAIN parent component inside the 

 prop, React Query will make the query cache available to you anywhere in your component tree.

with this it allows you to access the cache and interact with React Query wherever you want, without having to worry about triggering unnecessary re-renders.

by default if there’s already data allocated in the cache of the 

 will return that data immediately making it so you don’t have to fetch your API again. Otherwise, it will invoke the 

 which you provided a promise-based method and then put in the cache of the 

must return a promise that resolves with the data you want to cache.

I’ve been using React Query for some time now but didn’t really understand it as I’ve used my old company project code in React Query and used it on my other projects without knowing why the code does that. 

React Query Basic

ComponentProps are typically used when you want to create a component using a native html element like 

Can also use ComponentProps to get the props of a component ( reference 

https://www.totaltypescript.com/react-component-props-type-helper

Here are some basic type and useful prop types when using Typescript in React.

TS for React: Prop Types

Context API is a feature added in React 16.3 that allows to share states across the entire application.

Less prop drilling ( passing props down manually at every level )

particularly useful for managing global data that needs to be shared between multiple components

It can be useful as well to store data retrieved from external sources such as API or databases and make it available to all components.

is a component wrapped in the component tree that is responsible for providing the data ( state ) to its child components

 props, which is the data you want to share

typically you want to wrap your top-level component or a higher-level component with the context provider to make the data available to all its children components. Such as 

A component that consumes the data provided by the Context Provider.

will automatically re-render whenever the data it consumes changes to ensure it is up to date.

 accepts any kind of value ( even an object ).

Theming - change the appearance of your application from light to dark? put it into context so all its child components can update

Current Account - need to know the current logged-in user, and you need it for your components to use if the user has permission on the specific component

Routing - rerouting your user if it’s logged-in account has expired, or maybe you just want to redirect them to another part of your site.

Managing States - or you only want to pass some state to a lower component or maybe parent component?

https://react.dev/learn/passing-data-deeply-with-context#use-cases-for-context

How to use React Context API ( Theme toggling)

Let’s create a Theming Context that toggles our app theme from dark to light mode.

 - custom hooks that access theme and toggleTheme function.


 - component that will wrap in our application that will provide the theme state and the toggleTheme function

Use the Theme in our MainContent component

https://codesandbox.io/s/react-context-api-5pjh9p

Context API is a feature added in Reacy 16.3 that allows to share states across the entire application.

Learning React Context API

My first time adding User Authentication / Login Logout integration to my client project was an awesome experience. I’ve always been just doing the CRUD, Component before and giving me the opportunity to do the Login credentials was pretty cool.

Anyway, these “how to’s” are what I’m basing my code from now on ( until I learn a better approach to do it ) going forward.

So the important thing about doing any kind of challenging task is to cut them down first into little pieces and then do them one at a time.

Here’s how the login authentication is built based on what I gather on the web:

Login Page ( UI ) - you have to have a small UI component to put down your username and password

Login Logic for forms - this includes the state management / or putting your login information and passing it to the API

Tokens & Session storage - when API sees your login information, it’ll usually respond with something that confirms that you have the correct details. Depending on your project, mine returns the user details and tokens. Which we need to access data and pages that require tokens or authentication to open.

Protect Routes - if we have multiple pages, we might need to protect some pages that require users' information and authentication before accessing. Protecting them with some kind of redirect is one that I have used on my current project.

Logout Function - removing any traces of user information on our browser.

Just a simple login form will do for this how to’s:

 function for our form to be able to change the input fields, then 

2. Interacting with the API with our credentials. We needed to know if we entered the correct or incorrect credentials and check if there’s a return data from our API. Back in our 

 function, we just wanted to see in our console what data our API is going to give to us.

 this object will depends on the server or API you are using, at this moment the API I’m using requires this headers and the credentials are required to be passed in the body.

We now have a basic Login page that responds to our entered credentials. We should have been able to see what kind of message/response it has and use that response to our application.

Usually, in any login authentication, the server will respond with a token, token expiration, and user details. With this information, we can store them in our browser's local storage to be used for application. 

Displaying the user details ( name ) in the frontend 

Using the tokens to get other API information we might need 

Logging off the app automatically when the token expires

Back on the handleSubmit function, we can store our login API response in the local storage.

Again depending on your API returned data, we can add them to our 

 to be used on different parts of our site. Now we have 

This one is where I struggled a lot when I was doing the user authentication as I was not really familiar with HOC ( High Order Component - more on that soon ) back then and still right now 😅 and Context API. We need to create some kind of a way to create restrictions/protection on some pages/routes that we wanted only logged-in users to view.

In this case, I’m just going to make sure the user can’t see the home page 

 that’s why in token and session storage, we redirect the user after logging in. Now we’ll create a way to make sure non-logged-in users can’t see our home page 

Let’s start by making sure that when a valid user logged in, we can access his data everywhere in our App. We’re going to use Context API here.

function here as well, so we can use it anywhere in our application in the future.

2. Create our High Order Component to make sure that if a non-logged in user cannot access our home page, and redirects to our login page. Basically, what we’re doing is creating a component that takes a component as an argument and returns a new component. With the new component, we’re checking first if the user has logged-in information and is valid before rendering the component. ( too much use of the word component here 🤣 ).

We just need to wrap this component in any pages we wanted to ask/require authentication.

 function. This will be easy as we just need to clear out the 

 that we created earlier when logging in.

 function into the component you needed it.

Congratulations! 🥳 Now you have a working user authentication component. 

This is how I did my first ever User Authentication task, and there is for sure a better approach than what I have, and there’s a better tool as well to use for easier user authentication. 

 where I see lot’s of developer is currently using for thier next.js authentication. 

Check out the whole code in my GitHub Repository: 

https://github.com/owaaquino/Login-Authentication

Login / Logout /  User Authentication

Let’s create a simple notification component without using any library.

So how will we add a message to the notification? And what will trigger it?

Or anything else you want to use as long it got triggered 😅

Simple Notification Component

All right, so this one was so FUN! ( emphasis on Fun! ), I’ve been trying to do this for a couple of days and finally managed to find a solution. Thanks, ChatGPT!

Honestly, I’m not really good at doing this routing and paginating stuff. I had to use my old codes before and paste them in. Unfortunately, my old codes won’t work this time as I’m using a different approach and tried 

 for the first time on a blog. ( I am used to doing stuff on GraphQL with Gatsby, and I have a ready-to-paste old code ).

All right, this one was so FUN! ( emphasis on Fun! ). I’ve been trying to do this for a couple of days and finally managed to find a solution. Thanks, ChatGPT! 

NextJS + Sanity.io Pagination Fun! 😒

 for my key values when creating a list of items in React, and for me, that will do. This will solve my issue with 

 need a key for your list items (not the actual warning)

 warning message in my console when building React applications.

I found out about this recently as a great way to generate a key id on your list of items. 

We’ll need to generate them dynamically when we get our list item. So more code 😅

I usually just use an index for my key values when creating a list of items in React and for me, that will do. This will solve my "You need a key for your list items" warning message in my console when building React application.

generate keys for your list item ( react )

If you’ve been doing ReactJS for some time you know that it’s a lot of work just to do 

 in React. There’s just too much stuff you have to do and consider. You have to do your own state management for the inputs else it’ll not work.

 method/hooks for creating Forms and this is my go-to custom hook for my forms.

How will I use this on my form component? you just have to import the custom hook 

 for much more complex forms that you need to build. Documentation is solid and easy to use. 👍

If you’ve been doing ReactJS for some time you know that it’s a lot of work to do <Forms /> in React. There’s just too much stuff you have to do and consider. You have to do your own state management for the inputs else it’ll not work.

useForm

I like using styled-component for my project because I have to put the style on my component than putting it in some folder to make it more organized!

( Kidding aside it’s better to put my style somewhere that you can reuse on other components = SSOT )

Anyway, I always forgot how to use props on the styled-component. So here it is.

but can I have props that make a set of styles? Yes, but it’s not really that readable for me. It’s better to create two sets of classes, and then I need to create conditions for my component to use the class based on my need.

I like using styled-component for my project because I have to put the style inside my component rather than putting it in some folder to make it more organized!  

Tags