DEV Community: Dalcio

React Performance: use(State | Reducer | Ref) theoretical summary

Dalcio — Sun, 26 Mar 2023 15:41:33 +0000

When we speak about development using react in the years of 2023 its dificulte not to mention in one of his game-changer, the React Hooks, the guilt of the easy way to manage state and lifecycle methods in functional components. However, with great power comes great responsibility, having this in mind, it's important to understand the performance implications of using hooks.

Here, we'll discute the performance implications of some of the most commonly used hooks in React: useState, useReducer, and useRef.

By understanding the performance characteristics of these hooks, you can optimize your code and ensure that your application runs as efficiently as possible.

Summary

React lifecycle
React Hooks and performance: in a flash
useState performance implications
useReducer performance implications
useRef performance implications
Conclusion
Reference
About the Author

React lifecycle

React lifecycle refers to the set of stages or steps that a React component goes through during its existence, from creation to destruction (from birth to death). And understanding the React lifecycle is essential for writing efficient and effective React applications, and a misunderstanding can lead to performance problems.

The React component lifecycle can be divided into three main phases: mounting, updating, and unmounting.

Mounting: The mounting phase occurs when a functional component is first rendered. During this phase, the component function is called, and its JSX is returned. The component is then added to the DOM.

  useEffect(() => {
    // This peace of code refers to mounting stage
    document.title = "The Component was mounted"
  }, []); // the mounting phase is characterized ny en empty array of dependencies

Updating: The updating phase occurs when a functional component's props or state are updated. During this phase, the component function is called again with the new props or state, and its JSX is returned. The updated JSX is then used to update the DOM.

  const [state, setState] = useState()

  useEffect(() => {
    // This peace of code refers to update stage
    doSomethingWithState(state)
  }, [state]); // This array of dependencies is fundamental to represent the update phase

Unmounting: The unmounting phase occurs when a component is removed from the DOM. During this phase, the defined function is called, which allows developers to perform any necessary cleanup operations before the component is removed.

  useEffect(() => {
    // This will be executed when the component mounts

    const timeoutId = setTimeout(()=> {
        console.log("executing some operation on mounting")
    }, 1000)

    return function unmountingPhase(){
      // This will be executed when the component unmounts
      clearTimeout(timeoutId) // this will remove the timeout when the component unmounts
    };
  }, []);

React Hooks and Performance: In a flash

React Hooks are a set of functions that allow developers to use state and other React features in functional components. They were introduced in React 16.8 and have since become a staple of React development.

Hooks can greatly improve the performance of React applications by enabling functional components to have their own state and lifecycle methods, which previously were only available in class components. This means that developers are allowed to write more concise and expressive code, as well as reuseable stateful logic across multiple components.

However, it's important to understand the performance implications of using hooks. When using hooks like useState, useReducer, and useRef, it's possible to accidentally trigger unnecessary re-renders, causing performance issues in your application. Additionally, if state objects are too large or if there are too many state updates in a component, this can also lead to performance problems.

The Performance Implications of useState

The useState hook is used to manage state in a functional component. It provides a simple way to update state and trigger re-renders when the state changes. The performance implications of useState are generally minimal, as React is optimized to handle updates to state efficiently. However, if the state object is large or the component has many useState calls, this could impact performance. In such cases, it may be better to use useReducer instead.

Although react is optimized to handle multiple state updates efficiently to perform a single update to the component's state. It doesn't mean that we wont have a problem, and it's important to have in mind that if the state object is large or the component has many useState calls, this could impact performance.

Tip💡🕯️

To optimize performance when using useState, it's important to keep the state object as small as possible and to limit the number of useState calls in a component. If the state object is too large, consider splitting it into smaller pieces or using useReducer instead.

The Performance Implications of useReducer

The useReducer hook is like a super useState, it means an alternative to useState that provides a more powerful way to manage complex state. It allows you to define a reducer function that can handle multiple actions and state transitions. However, the performance implications of useReducer are similar to useState, but with some additional overhead due to the use of a reducer function.

Like useState, useReducer can cause performance issues if the state object is too large or if there are too many state updates in a component. However, in some cases, useReducer can be more efficient than useState, particularly when dealing with complex state objects or when there are many state updates.

Tip💡🕯️

To optimize performance when using useReducer, it's important to keep the state object as small as possible and to limit the number of state updates. Additionally, you can use memoization techniques, such as React.memo or useMemo, to avoid unnecessary re-renders.

The Performance Implications of useRef

useRef is a hook that allows you to create a mutable reference that persists across renders. It can be used to store a value that doesn't trigger a re-render when it changes, or to reference a DOM element directly. The performance implications of useRef are generally minimal, as it doesn't trigger re-renders and has little overhead.

However, if used improperly (e.g., creating a new useRef instance on every render), it could impact performance. Therefore, it's important to use useRef judiciously and only when necessary.

Tip💡🕯️

To optimize performance when using useRef, it's important to only create a useRef instance when needed and to avoid creating unnecessary instances on every render.

Conclusion

React Hooks have made it easier than ever to manage state and lifecycle methods in functional components. However, it's important to understand the performance implications of using hooks, as they can impact the overall performance of your application.

By understanding the performance implications of useState, useReducer, and useRef, you can optimize your code and ensure that your application is running as efficiently as possible. Remember to keep the state object as small

Reference

About the Author

Name: Dálcio Garcia
Role: Front End Developer
Github: dalcio
Linkedin: Dálcio Macuete Garcia
Portfolio: dalciogarcia

Monorepo with Next.js (2023): Managing Complex Projects Easier - A Theoretical Guide

Dalcio — Mon, 20 Mar 2023 20:48:18 +0000

One of the oldest problems that companies have gone through or are going through or will live through (from companies like Google, Uber, Facebook to startups) is related to the management of their projects, especially the most complex ones, which involve several teams working in different parts of the software whether large or small.
And when that happens, companies tend to look for ways to manage projects and one of the most used approaches is Monorepo, which consists of storing all the project's source codes in a single repository.
And with Next.js, this approach can be made even more efficient and easier to manage.

Summary

What is Monorepo?
Monorepo: Benefits
Monorepo: Disadvantages
Next.js and Monorepo
Conclusion
Author

What is Monorepo?

Monorepo or Monolithic Repository is a single repository that contains multiple projects.

Monorepo, is an approach used to manage software projects, which consists of storing all project source codes in a single source code repository.

Instead of keeping software components in separate repositories like in Turborepo, the Monorepo approach all components, projects, libraries and so on are kept in a single place/repository , making it easier for teams working on several projects at the same time to share code, as the codes used in various parts of different projects can be abstracted, thus facilitating their maintenance.

Monorepo: Benefits

Easier code sharing between projects: With all projects in a single repository, it's easy to share code and components between different projects. This can reduce development time, avoid code duplication, and maintain consistency across projects.
Simplifies the deployment of changes to multiple software components.
Facilitates discovering cross-project code dependencies: May reduce the risk of merge conflicts
Increased Project Visibility: In a monorepo, it's easier to view all projects and components in one place, which can help management teams better understand project scope and make informed decisions.
Ease of continuous integration and continuous delivery: With all projects in a single repository, it's easier to manage continuous integration and continuous delivery, allowing development teams to work more efficiently and avoid issues with releases outdated.

Monorepo: Disadvantages

Despite its benefits, managing a Monorepo is still a challenging task, especially for large-scale projects.

Repository Size: With all projects in a single repository, the repository size can get large and difficult to manage, especially in large projects. This can cause performance issues and difficulties working with the repository.
Code Conflicts: With many developers working on a single repository, there can be code conflicts and issues with changes that affect multiple projects. This can be especially problematic with large teams and complex projects.
Testing: Testing a monorepo can be more complicated than testing separate projects, as changes in one project can affect other projects and components. This can increase the complexity of testing and make it more difficult to guarantee code quality.
Developing in parallel: In a monorepo, it can be difficult to develop projects in parallel, as changes in one project can affect other projects and components. This can make it difficult for multiple development teams working simultaneously.

Next.js and Monorepo

Next.js is a react framework used for web development allowing to create server side we applications (Server Side Render) with ease.

Next.js, in addition to being the most used framework for web development, also has built-in resources that facilitate the implementation or integration of Monorepo.

Configuring Monorepo with NextJs

Walkthrough

With Next.js, it's easy to set up a Monorepo project. Next.js provides a set of dependency management features such as Yarn Workspaces that allow you to manage multiple package dependencies within a single project.

Additionally, Next.js supports a shared component architecture, where you can create shared React components throughout your project. This can be especially useful in a Monorepo project, where components need to be shared across multiple apps.

For example, suppose you are building an online store that consists of a main app and several secondary apps, such as an inventory management app and an order management app. In a Monorepo project with Next.js, you can have a shared directory called "components", where you can store React components that are shared across all apps. This can include components such as headers, footers, and sidebars that need to display across multiple apps.

Another advantage of using Next.js in a Monorepo project is that it allows you to use different environments for different parts of your project, allowing for greater flexibility in managing your code. For example, you can have a separate development environment for each app and shared library, allowing teams to work on different parts of the project without interfering with each other's work.

Conclusion

Monorepo is an increasingly popular approach to managing complex software projects. And with Next.js, this approach can be made even more efficient and easier to manage. With built-in features for dependency management and component sharing, Next.js is an excellent choice for Monorepo projects.

However, it is important to remember that managing a Monorepo project can still be challenging, especially for large-scale projects. Make sure you have a clear strategy for managing dependencies, testing, deployment and continuous integration and continuous delivery, and use the right tools to help streamline the process.

If you're considering using Monorepo in your next Next.js project, it's worth a try and evaluate the benefits and challenges this approach can bring to your software project.

To have in count

While monorepo is an efficient approach to managing software projects with multiple projects or components, it does not eliminate the fact that there are challenges to be considered. When deciding to use monorepo, it's important to weigh the advantages and disadvantages and assess whether this approach is right for your specific software project.

Before deciding to use Monorepo the following question must be asked: What is the problem I am trying to solve?

Author

Name: Dálcio Garcia
Role: Front End Developer
Github: dalcio
Linkedin: Dálcio Macuete Garcia
Portfolio: dalciogarcia

Monorepo com Next.js (2023): Gerindo projetos complexos de forma mais simples - Um Guia teórico

Dalcio — Thu, 16 Mar 2023 20:16:04 +0000

Um dos problemas mais antigos que na qual as empresas já passaram ou vivem ou viverão (desde empresas como o Google, Uber, Facebook à startups) está relacionada com o gerenciamento de seus projetos sobre tudo dos mais complexos, que envolvem varias equipes trabalhando em diferentes partes do software sejam elas grandes ou pequenas.
E quando isso acontece a tendência é de as empresas procurarem por formas de gerenciamento de projetos e uma das abordagens mais utilizadas é a de Monorepo que consistem em armazenar todas os códigos-fontes do projeto em um único repositório.
E com o Next.js, essa abordagem pode ser ainda mais eficiente e fácil de gerenciar.

Sumário

O que é Monorepo?
Monorepo: Benefícios
Monorepo: Desvantagens
Next.js e Monorepo
Conclusão
Autor

O que é Monorepo?

Monorepo ou Monolithic Repository é um repositório único que contém múltiplos projetos.

Monorepo, é uma abordagem utilizada para gerenciar projetos de software, que consiste em armazenar todos os códigos-fonte do projeto em um único repositório de código-fonte.

Em vez de manter-mos os componentes do software em partes repositórios separados com em Turborepo, a abordagem Monorepo todos os componentes, projetos, bibliotecas e outros são mantidos em um único lugar/repositório, facilitando as equipas que trabalham em vários projetos ao mesmo tempo com o compartilhanto de código pois os códigos usados em varias partes de diferentes projetos poderão ser abstraídos facilitando assim a manutenção do mesmo.

Monorepo: Benefícios

Facilita o compartilhamento de código entre projetos: Com todos os projetos em um único repositório, é fácil compartilhar código e componentes entre diferentes projetos. Isso pode reduzir o tempo de desenvolvimento, evitar duplicação de código e manter a consistência entre os projetos.
Simplifica a implantação de alterações em vários componentes do software.
Facilita a descoberta de dependências de código entre projetos: Pode reduzir o risco de conflitos de mesclagem
Maior visibilidade do projeto: Em um monorepo, é mais fácil visualizar todos os projetos e componentes em um único lugar, o que pode ajudar as equipes de gerenciamento a entender melhor o escopo do projeto e a tomar decisões informadas.
Facilidade de integração contínua e entrega contínua: Com todos os projetos em um único repositório, é mais fácil gerenciar a integração contínua e entrega contínua, permitindo que as equipes de desenvolvimento trabalhem de forma mais eficiente e evitem problemas com versões desatualizadas.

Monorepo: Desvantagens

Apesar de seus beneficios, gerenciar um Monorepo não deixa de ser uma tarefa desafiadora, especialmente para projetos de grande escala.

Tamanho do repositório: Com todos os projetos em um único repositório, o tamanho do repositório pode ficar grande e difícil de gerenciar, especialmente em projetos grandes. Isso pode causar problemas de desempenho e dificuldades para trabalhar com o repositório.
Conflitos de código: Com muitos desenvolvedores trabalhando em um único repositório, pode haver conflitos de código e problemas com mudanças que afetam vários projetos. Isso pode ser especialmente problemático em equipes grandes e projetos complexos.
Testes: Testar um monorepo pode ser mais complicado do que testar projetos separados, já que as alterações em um projeto podem afetar outros projetos e componentes. Isso pode aumentar a complexidade dos testes e tornar mais difícil garantir a qualidade do código.
Desenvolvimento em paralelo: Em um monorepo, pode ser difícil desenvolver projetos em paralelo, já que alterações em um projeto podem afetar outros projetos e componentes. Isso pode dificultar o trabalho de várias equipes de desenvolvimento trabalhando simultaneamente.

Next.js e Monorepo

O Next.js é um framework react utilizado para o desenvolvimento web em permitindo criar aplicações we do lado do servidor (Server Side Render) com facilidade.

O Next.js, além de ser o framework mais utilizado para o desenvolvimento web, possui também recuros embutidos que facilitam a implementação ou integração de Monorepo.

Configurando Monorepo com NextJs

Passo a passo

Com o Next.js, é fácil configurar um projeto de Monorepo. O Next.js fornece um conjunto de recursos para gerenciamento de dependências, como Yarn Workspaces, que permitem que você gerencie várias dependências de pacotes em um único projeto.

Além disso, o Next.js oferece suporte a uma arquitetura de componentes compartilhados, onde você pode criar componentes React compartilhados em todo o projeto. Isso pode ser especialmente útil em um projeto de Monorepo, onde os componentes precisam ser compartilhados entre várias apps.

Por exemplo, suponha que você esteja construindo uma loja on-line que consiste em um app principal e vários aplicativos secundários, como um aplicativo de gerenciamento de estoque e um aplicativo de gerenciamento de pedidos. Em um projeto de Monorepo com Next.js, você pode ter um diretório compartilhado chamado "components", onde você pode armazenar componentes React que são compartilhados em todos os apps. Isso pode incluir componentes como cabeçalhos, rodapés e barras laterais, que precisam ser exibidos em vários apps.

Outra vantagem do uso do Next.js em um projeto de Monorepo é que ele permite que você use diferentes ambientes para diferentes partes do seu projeto, permitindo uma maior flexibilidade na gestão do seu código. Por exemplo, você pode ter um ambiente de desenvolvimento separado para cada app e biblioteca compartilhada, permitindo que as equipes trabalhem em diferentes partes do projeto sem interferir no trabalho dos outros.

Conclusão

O Monorepo é uma abordagem cada vez mais popular para gerenciamento de projetos de software complexos. E com o Next.js, essa abordagem pode ser ainda mais eficiente e fácil de gerenciar. Com os recursos embutidos para gerenciamento de dependências e compartilhamento de componentes, o Next.js é uma excelente opção para projetos de Monorepo.

No entanto, é importante lembrar que a gestão de um projeto de Monorepo ainda pode ser desafiadora, especialmente para projetos de grande escala. Certifique-se de ter uma estratégia clara para gerenciamento de dependências, testes, implantação e integração contínua e entrega contínua, e use as ferramentas certas para ajudar a simplificar o processo.

Se você está considerando usar o Monorepo em seu próximo projeto com Next.js, vale a pena experimentar e avaliar os benefícios e desafios que esta abordagem pode trazer para o seu projeto de software.

A ter em conta

Embora, o monorepo seja uma abordagem eficiente para gerenciar projetos de software com múltiplos projetos ou componentes, não elimina o fato de que existam desafios a serem considerados. Ao decidir usar o monorepo, é importante avaliar as vantagens e desvantagens e avaliar se essa abordagem é adequada para o seu projeto de software específico.

Antes de decidir utilizar Monorepo a seguinte pergunta deve ser feita: Qual é o problema que estou tentando resolver?

Autor

Name: Dálcio Garcia
Role: Front End Developer
Github: dalcio
Linkedin: Dálcio Macuete Garcia
Portfolio: dalciogarcia

What React drag and drop lib you can recommend?

Dalcio — Thu, 09 Jun 2022 17:29:29 +0000

Context API & State Managers

Dalcio — Wed, 25 May 2022 10:39:46 +0000

For some reason libraries like Redux are built using Context API. And when someone in the React world gets to know tools like Context API, Redux, Zustand, Recoil and so on, a lot of times they get stuck in the very common doubt (at least I've been through it), which is When should I use the Context API instead of a State Manager?. Well here's what I think about it.

Before answering, let's go through some definitions.

What's Context API?

The Context API represents a way of sharing variables or global states with its internal components (avoiding situations like Prop drilling).

What're State Managers?

They are tools that help us manage the most complex states of an application. Controlling how data can be mutated.

According to Open Replay, in the React ecosystem the most popular State Managers are: Redux* *, **Recoil, Zustand, Jotai, Rematch and the Hookstate.

And now?

OK, now that you know what Context API is and what State Managers are, let me just say that anything you can do with State Managers you can do with Context API, but the point is: Is it worth it? or Should I spend time on this?.

And I tell you no, it's not worth it, after all, why reinvent the wheel?

What going on, is that the State Managers already provide a well-elaborated tool to be able to manage our states as efficiently as possible and if we use the Context API instead of libs like Redux, we would have to worry about handling the states to avoid unnecessary rendering affecting the performance of our application.

When we should Context API?

Theming — Swipe down the app theme
i18n — Transmit translation messages
Authentication — Pass the current authenticated user
Atomic Component Globalization: When we have a component with some states that need to be used by more internal components.

References

Context API & State Managers

Dalcio — Wed, 25 May 2022 10:19:54 +0000

Por alguma razão bibliotecas como Redux são construidas usando Context API. E quando alguém no mundo React passa a conhecer ferramentas como Context API, Redux, Zustand, Recoil e por aí, muita das vezes fica preso na duvida muito comum (pelo menos eu já passei por isso), que é Quando devo usar o Context API ao invés de um State Manager?. Pois bem aqui vai o que penso sobre isso.

Antes de responde-lo vamos a algumas definições.

O que é o Context API?

O Context API representa uma forma de partilhar variaveis ou estados globais com componentes internos do mesmo (evitando situações como Prop drilling).

O que são State Managers?

São ferramentas que nos ajudam a gerenciar os estados mais complexos de uma aplicação. Controlando a forma que os dados podem ser modificadas, quando devem ser modificadas, porque, e por a´´i vai.

De acordo com o Open Replay, no ecossistema React os State Managers mais populares são: Redux, Recoil, Zustand, Jotai, Rematch e o Hookstate.

E então?

OK, agora que sabes o que é Context API e o que são State Managers, deixe-me dize-lo que tudo que consegues fazer com os State Managers consegues faze-lo com o Context API, mais o ponto é: Vale a pena? ou Devo perder tempo com isso?.

E eu digo-te que não, não vale a pena, afinal porque reinventar a roda?

O que acontece é que os State Managers já fornecem consigo um ferramental bem elaborado para podermos gerenciar os nossos estados de forma mais eficiente possível e o que acontece é que se tivéssemos que usar o Context API no lugar de libs como Redux, teriamos que nos preocupar em tratar os estados de forma a evitar renderizações desnecessárias afetando a perfomace da nossa aplicação.

Quando usar o Context API?

Temas — Passe para baixo o tema do aplicativo
i18n — Transmitir mensagens de tradução
Autenticação — Passar o usuário autenticado atual
Atomic Component Globalization: Quando temos um componente com alguns estados que precisam ser usados por componentes mais internos.

References

Top 6 React state management libraries for 2022
- Picking From 20 React State Managers
- WATCH LATER ADD TO QUEUE NextJS + State Management = Good Idea???

Building A PWA With NextJS 12 and Typescript

Dalcio — Mon, 23 May 2022 10:46:10 +0000

Intro

Hello GUYS!!

Are you tired of building the same app thing twice or even more? What if I tell and so you one way that can help you save time and a lot of effort? So let me introduce to you a way that can help you saving time time sometimes. So what I'm gonna introduce to you is a way of creating PWA with Next JS.

Intro
What's a PWA?
What we're building?
Our Arsenal
The Application
Making The Application PWA
Congratulations
References
The project
See Demo

What's a PWA?

According to Developer Mozilla, PWAs(Progressive Web Apps) are web apps that use service workers, manifests, and other web-platform features in combination with progressive enhancement to give users an experience on par with native apps.

And what this means? This means that you can make your web apps work like a native app (no matter what platform you will use, windows, mac OS, android, IOS,...), you will be able to write once and make you web app installable making your app browser independent.

Checkout for more details about PWA: web.dev, Developer Mozilla

What we're building?

We'll build an Countdown App, that notifies the user in every two hours, to help us stand up and fight against the sedentary.

Our Arsenal

Since the goal is to build a Next JS app, it's mandatory to know the basics of React jS.

To bring this idea to life we'll use the following tools: Next JS, TypeScript and Mantine UI.

TypesScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

Mantine UI is a fully featured react component library.

The Application

If you already have your app done and you just want make it a PWA app, you can jump into Making The Application PWA section.

Else let's star by cloning



git clone https://github.com/Dalcio/sedentarism-alert

cd sedentarism-alert



yarn install && yarn run dev



npm install && npm run dev

Sedentarism App Alert

Now that we have our project settled, let's jump into and take a quick look at our project structure:

public/* we have two files, our logo and the sound that's played when the times end.
src/styles contains a simple component at src/styles/global that contains a couple of global styles.
src/pages responsible to contain our pages, we have only one page (the Home page).
src/components contains the body of our countdown.
src/hooks contains our custom hooks useCounter responsible to handle the time and usePlaySound responsible to handle the audio played when the clock is zero.

So, now that we understand our project let make our tiny app PWA.

Making The Application PWA

Now that we have an app (if don't), it's time to make our app PWA.

First I'll resize the icons 4x because of the the different screen that exist.

Steps

To make our app pwa we need to do the following steps:

install next-pwa dependency
configure PWA in Next Config
generate the manifest
add the manifest in _document.tsx

Installing Next PWA dependency

We have to install next-pwa



yarn add next-pwa



npm i next-pwa

Configuring Next Config

Now we need to configure our next.config.js to look the following:



/** @type {import('next').NextConfig} */
const withPWA = require('next-pwa');

const nextConfig = withPWA({
  pwa: {
    dest: 'public',
    register: true,
    skipWaiting: true,
  },
  reactStrictMode: true,
});

module.exports = nextConfig;

```

#### Generating the manifest <a href="step-three"></a>

There's many option available that can help you generate the **manifest**, I'll just use [simicart](https://www.simicart.com/manifest-generator.html/)
and fill the form.

![Manifest Generator field](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tptarks0qqyz0l85cmui.PNG)

and click on generate and upload the files generated to your public folder. After all rename the `manifest.webmanifest` to `manifest.json`

The generated JSON file


````json
{
    "theme_color": "#247ED6",
    "background_color": "#77eed8",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "name": "Sedentarism Alert",
    "short_name": "SAlert",
    "description": "It's an app that plays a sound when the time is 0 ",
    "icons": [
        {
            "src": "/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icon-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}
```



#### Add the manifest in _document.tsx <a href="step-four"></a>

Now we'll configure the manifest in our `_document.tsx` file, looking like:



```tsx
import { createGetInitialProps } from '@mantine/next';
import Document, { Head, Html, Main, NextScript } from 'next/document';

const getInitialProps = createGetInitialProps();

export default class _Document extends Document {
  static getInitialProps = getInitialProps;

  render() {
    return (
      <Html>
        <Head>
          <title>Sedentarism Alert - PWA</title>
          <link
            rel="shortcut icon"
            href="alarm-clock.png"
            type="image/x-icon"
          />
          <link rel="manifest" href="/manifest.json" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

```



## Congratulations <a name="section-6"></a>

Now our app is a PWA. Congratulation. Now you can deploy it on [**Vercel?»*](https://vercel.com/guides/deploying-nextjs-with-vercel)

## References <a name="section-7"></a>
[Progressive web apps (PWAs)](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
[Progressive Web Apps](https://web.dev/progressive-web-apps/?gclid=CjwKCAjw4ayUBhA4EiwATWyBrvb4n5SU8fTzo774tAXUQ8CgYo-bT1z2-EeUXuMtvN_yCvQOm6JE-BoC-nAQAvD_BwE)
[How to Create a PWA With Next.js in 10 Minutes](https://www.youtube.com/watch?v=ARNN_zmrwcw)
[How to make a Next.js app a PWA](https://medium.com/geekculture/how-to-make-a-next-js-app-a-pwa-a5e2b13da548)

## The Project <a name="the-project"></a>

### [**Project Repository**](https://github.com/Dalcio/sedentarism-alert)

## See Demo <a name="demo"></a>

### [Live Demo](https://sedentarism-alert.vercel.app/)

DEV Community: Dalcio

React Performance: use(State | Reducer | Ref) theoretical summary

Summary

React lifecycle

React Hooks and Performance: In a flash

The Performance Implications of useState

Tip💡🕯️

The Performance Implications of useReducer

Tip💡🕯️

The Performance Implications of useRef

Tip💡🕯️

Conclusion

Reference

About the Author

Monorepo with Next.js (2023): Managing Complex Projects Easier - A Theoretical Guide

Summary

What is Monorepo?

Monorepo: Benefits

Monorepo: Disadvantages

Next.js and Monorepo

Configuring Monorepo with NextJs

Conclusion

To have in count

Author

Monorepo com Next.js (2023): Gerindo projetos complexos de forma mais simples - Um Guia teórico

Sumário

O que é Monorepo?

Monorepo: Benefícios

Monorepo: Desvantagens

Next.js e Monorepo

Configurando Monorepo com NextJs

Conclusão

A ter em conta

Autor

What React drag and drop lib you can recommend?

Context API & State Managers

What's Context API?

What're State Managers?

And now?

When we should Context API?

References

Context API & State Managers

O que é o Context API?

O que são State Managers?

E então?

Quando usar o Context API?

References

Building A PWA With NextJS 12 and Typescript

Intro

Table of contents

What's a PWA?

What we're building?

Our Arsenal

The Application

Sedentarism App Alert

Making The Application PWA

Steps

Installing Next PWA dependency

Configuring Next Config