It is an easy-to-use keepAlive library exclusively for nextjs.

Overview

Next-Easy-KeepAlive ( 🪄 NEKA)

We always run into the problem of maintaining the back state, which is an endemic problem of SPA. Various problem-solving methods have been suggested, but can't we solve these problems more intuitively and easily?

So I created a new KeepAlive library for Nextjs, which implemented the configuration of React as closely as possible.

What's good?

NEKA does not only maintain the state of a specific page, but can record the previous state by assigning both state and ref values to each component.

NEKA also listens for scroll events that occur on pages that have component using the useKeepAlive hook and records the value of window.scrollY. And when it goes back, it adjusts the scroll to the previously recorded scroll position.

As described above, NEKA saves the state and ref values without saving the DOM of the previous page, and configures them to be set to initial values when initializing the values, reducing the load on the browser and working more naturally.

Even if you record the previous state, it would be more convenient to have a lifeCycleHook that you can use when a history pop action such as going back occurs and when it does not. Therefore, NEKA provides a useBackActive hook that fires only once when the history pop action first occurs, and a useNotBackEffect hook that fires only once when the history pop action is a push.

Apart from this, NEKA provides several options that developers can easily customize. NEKA is committed to providing a better user experience, especially in the mobile environment.

Getting Started

  1. Enter the next-easy-keepalive installation command as shown below:
npm i next-easy-keepalive 
# or 
yarn add next-easy-keepalive
  1. You need to add KeepAliveProvider to /pages/_app.tsx. The important thing here is to wrap it right outside <Component {...pageProps} />.
import '@/styles/globals.css';
import type {AppProps} from 'next/app';
import {useRouter} from 'next/router';
import {KeepAliveProvider} from 'next-easy-keepalive'; // import KeepAliveProvider

export default function App({Component, pageProps}: AppProps) {
  const router = useRouter();
  
  return (
    // should be wrapped right outside <Component ... />
    <KeepAliveProvider router={router}>
      <Component {...pageProps} />
    </KeepAliveProvider>
  );
}

Now you are all set to use NEKA! It's that simple!!!, right? 😎

Now that you learn how to use the useKeepAlive Hook, you are now free to use the keep-alive feature while using nextjs. You no longer need to calculate the scroll position of the previous page!

So, let's see how to use it now.

How to use useKeepAlive Hook

Get and Call the useKeepAlive hook on the component you want to keep state. (It doesn't matter if it's a page component.)

import Link from "next/link";
import {useKeepAlive} from 'next-easy-keepalive';

export default function Home() {
    /**
     * When using useKeepAlive, you must call it by putting a
     * specific key value in a passing argument.
     * This is because we need to record which component's value we are storing, and also to make debugging easier.
     * It is recommended to include the component function name.
     */
    const {useMemState, useNotBackEffect, useBackActive} = useKeepAlive('Home');

    /**
     * useMemState acts like the useState hook.
     * However, even if the page is moved, it serves to record the previous value.
     */
    const [list, setList] = useMemState<number[]>([], 'list');

    // makeList function to virtually load a list
    const makeList = () => {
        setTimeout(() => {
            const arr = Array.from({length: 1000}, (_, idx) => idx + 1);
            setList(arr)
        }, 500)
    };


    /**
     * The useNotBackEffect hook is executed on first render only if there is no back.
     * Like the useEffect hook, the second takes an array of dependencies. 
     * The hook runs again when the value changes.
     */
    useNotBackEffect(() => {
        console.log('history pop')
        makeList();
    }, []);

    /**
     * The useBackActive hook is only executed on first render when going back.
     * Like the useEffect hook, the second takes an array of dependencies.
     * The hook runs again when the value changes.
     */
    useBackActive(() => {
        console.log('history push')
    }, []);

    return (
        <main>
            <ul>
                {list.map(item => <li key={item}>
                    <Link href={`/${item}`}>{item} page</Link></li>)}
            </ul>
        </main>
    )
}

The example above shows how to use useMemState to record the state of the current component while playing the same role as useState by calling useKeepAlive.

The downside of useKeepAlive is that you have to specify a key value. However, these key values can be a strength when debugging.

img_1.png

You can check what values are currently recorded and how by typing window.__BACK_HISTORY__ in the console window in the debugging tool.

img_2.png

In the React component debugging tool, you can trace memState as shown in the image above, but if you want to see the history of the previous page or more detailed history, click keepAlive. It is more convenient to debug because you can know what state the state is from the key value.

useKeepAlive doesn't just record state values, it can also record ref values!

import Link from "next/link";
import {useKeepAlive} from 'next-easy-keepalive';

export default function Home() {
    const {useMemState, useMemRef, useNotBackEffect} = useKeepAlive('Home');

    /**
     * Just as you put a key value in useState,
     * you also need to put a key value in use MemRef.
     * It is recommended to use the variable name you are using.
     */
    const totalCount = useMemRef(0, 'totalCount');
    const [list, setList] = useMemState<number[]>([], 'list');

    const makeList = () => {
        setTimeout(() => {
            const arr = Array.from({length: 1000}, (_, idx) => idx + 1);
            setList(arr);
            totalCount.current = arr.length; // record number of lists
        }, 500)
    };

    useNotBackEffect(() => {
        makeList();
    }, []);

...
}

KeepAliveProvider options

Options passed as props of KeepAliveProvider can be regarded as global option settings of keepAlive.

option type default value description
alwaysRemember boolean undefined false Determines whether the previously
saved values will be recalled only when going back or forward,
such as the history pop action, or whether the previously recorded values
will be recalled for all pages that have been visited even once.
maxPage number undefined 10 This option determines the maximum number of keep-alive pages.
The default is 10 pages, and the oldest page record is discarded
when the number of keep-alive pages exceeds the maxPage value.
(maximum is 17)

For example:

//...

export default function App({Component, pageProps}: AppProps) {
  return (
    <KeepAliveProvider maxPage={10} alwaysRemember={true} >
      <Component {...pageProps} />
    </KeepAliveProvider>
  );
}

useKeepAlive options

The option value entered as the second argument of the useKeepAlive hook can be regarded as the keepAlive option of each component for which the useKeepAlive hook is used.

option type default value description
alwaysRemember boolean undefined true An option value that gets the previous state value only if the useKeepAlive hook's alwaysRemember option is set to false, even if the KeepAliveProvider globally sets the alwaysRemember option to true.
keepScroll boolean undefined false This is an optional value that determines whether to save the scroll position value (window.scrollY).
store boolean undefined true An optional value that turns off record operations.

Simulation

img_2.png

Thanks!

Contact mail: [email protected]

You might also like...
Cookie serializer and deserializer library for next.js
Cookie serializer and deserializer library for next.js

next-cookie Cookie serializer and deserializer library for next.js. Installation $ npm install next-cookie Usage HOCs The cookies are read and write

keepalive-react-component是一个react缓存组件

基于react开发出来的react缓存组件,类似于类似vue的keepalive包裹vue-router的效果功能

A high performance, easy to use, rock solid camera library for React Native apps.
A high performance, easy to use, rock solid camera library for React Native apps.

🎈 React Native Camera Kit A high performance, easy to use, rock solid camera library for React Native apps. Cross Platform (iOS and Android) Optimize

PyTorch Live is an easy to use library of tools for creating on-device ML demos on Android and iOS. With Live, you can build a working mobile app ML demo in minutes.
PyTorch Live is an easy to use library of tools for creating on-device ML demos on Android and iOS. With Live, you can build a working mobile app ML demo in minutes.

Build your AI-powered mobile apps in minutes: Get Started · Tutorials · API PyTorch Live is a set of tools to build AI-powered experiences for mobile.

Customizable & Easy to Use Single Select Library for React Native
Customizable & Easy to Use Single Select Library for React Native

Dark Theme Light Theme Installation Add the dependency: npm i @freakycoder/react-native-single-select npx pod-install // After Install the `react-nati

An easy-to-use form validation library for React, as of now it only supports email and required field validation, will be adding other quite soon.

react-use-form-validate Super customizable validation library for forms in react Install npm install --save react-use-form-validate Usage import { use

Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design
Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design

Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design

SyncedStore CRDT is an easy-to-use library for building live, collaborative applications that sync automatically.
SyncedStore CRDT is an easy-to-use library for building live, collaborative applications that sync automatically.

SyncedStore is an easy-to-use library for building collaborative applications that sync automatically. It's built on top of Yjs, a proven, high performance CRDT implementation.

RTConnect is an easy-to-use React component library that enables developers to set up live, real-time video calls, between multiple connected peers on different computers
RTConnect is an easy-to-use React component library that enables developers to set up live, real-time video calls, between multiple connected peers on different computers

RTConnect is an easy-to-use React component library that enables developers to set up live, real-time video calls, between multiple connected peers on different computers in a React app.

Adding Headless CMS to NextJS like a Pro, this repository contains code examples and guide on how to integrate Storyblok, a headless CMS to NextJS.
Adding Headless CMS to NextJS like a Pro, this repository contains code examples and guide on how to integrate Storyblok, a headless CMS to NextJS.

Adding Storyblok to NextJS Like A Pro The official website describes Storyblok in the following terms: Storyblok is the only Headless Content Manageme

Nextjs-react-query - Sample usage React-Query with NextJS

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Nextjs-chakra-navigation-example - NextJS with chakra-ui responsive nav example

nextjs-chakra-navigation-example I looked at how to implement navigation in next

Shopify NextJS App Example. No custom NextJS server needed

Shopify NextJS App Example An example app built with NextJS that can be setup an

A simple ReactJS package ment to make ReactJS/NextJS Firebase authentication easy

A simple ReactJS package ment to make ReactJS/NextJS Firebase authentication easy

A NextJS, Tailwind, TRPC, Prisma, and NextAuth Starter Project that makes getting an app up and running as easy as possible

A NextJS, Tailwind, TRPC, Prisma, and NextAuth Starter Project that makes getting an app up and running as easy as possible

🥯Papanasi is the Frontend UI library to use cross Frameworks. A set of components to use in Angular, React, Solid, Svelte, Vue and Web Components

🥯 Papanasi is a UI library to use cross Frameworks. A set of components to use in Angular, React, Solid, Svelte, Vue and Web Components. Is based on the Mitosis library and documented using Storybook.

This is a boilerplate to be use in your project with tecnologies TypeScript, NextJS, Jest and Styled-components.
This is a boilerplate to be use in your project with tecnologies TypeScript, NextJS, Jest and Styled-components.

NextJS Boilerplate This is a boilerplate to be use in your project with tecnologies TypeScript, NextJS, Jest and Styled-components. What is inside? Th

Brownie-next-mix - Everything you need to use NextJS with Brownie

Brownie NextJS Mix This mix comes with everything you need to start using NextJS

Owner
김종완
김종완
A plugin to generate terraform configuration for Nextjs 8 and 9

Terraform nextjs plugin A plugin to generate terraform configuration from nextjs pages The reason Nextjs supports serverless pages, where it creates f

Emanuele 47 Oct 20, 2022
nextjs + purgecss for smaller css bundles

next-purgecss Next.js + Purgecss = ?? Next.js makes it easy to create SSR and static React applications. Purgecss helps you remove unused CSS. Install

Luc Leray 132 Dec 30, 2022
Enable Fast Refresh for remote data in NextJS.

Enable Fast Refresh for remote data in NextJS.

Travis Arnold 153 Dec 23, 2022
Woo-next-br - WooCommerce React CMS Theme built with NextJs Babel, Node, using GraphQL and Apollo Client

WooCommerce Nextjs React Theme ?? This is a React WooCommerce theme, built with

null 6 Nov 28, 2022
Next-js movie-app - Sample movie app using NextJS and TMDB as an API

Next.JS Boilerplate with Typescript and Redux Toolkit A Next.JS Boilerplate in T

kadkad 3 Apr 1, 2022
NextJS VScode extension to visualize component tree.

Nexus A component tree extension for NextJS Report Bugs · Request Features Table of Contents About The Project Built With Installation Getting Started

OSLabs Beta 62 Nov 24, 2022
next-gql-dogs code for the NextJS + GraphQL + Typescript Blueprint video

next-gql-dogs code for the NextJS + GraphQL + Typescript Blueprint video

Jack Herrington 73 Nov 26, 2022
Next-base64: Base64 decoder and encoder for nextjs 🎉

next-base64 is a library for client-side and server-side base64 encoding and decoding

Yony Calsin 5 Sep 11, 2022
🌊 Deep dive NextJS

?? Deep dive NextJS

Beatriz Oliveira 7 Dec 12, 2022
CookieKas, free cashier app built with nextjs and local storage as database

CookieKas, free cashier app built with nextjs and local storage as database

Muhammad Advie Rifaldy 25 Dec 22, 2022