Use `getStaticProps`/`getServerSideProps` as react-hooks

Last update: Jun 20, 2022

next-data-hooks · codecov github status checks bundlephobia

Use getStaticProps and getServerSideProps as react hooks

next-data-hooks is a small and simple lib that lets you write React hooks for data queries in Next.js by lifting static props into React Context.

import { createDataHook } from 'next-data-hooks';

const useBlogPost = createDataHook('BlogPost', async (context) => {
  const { slug } = context.params;

  return; // ... get the blog post
});

function BlogPost() {
  const { title, content } = useBlogPost();

  return (
    <>
      <h1>{title}</h1>
      <p>{content}</p>
    </>
  );
}

BlogPost.dataHooks = [useBlogPost];

export default BlogPost;

Why?

  1. Writing one large query per page doesn't organize well. Asynchronous data fetching frameworks like apollo, relay, and react-query already allow you to write the queries closer to the component. Why can't static data queries be written closer to the component too?
  2. Works better with TypeScript — when you import a data hook, you're also importing its return type. When you call the hook inside your component, the types are already there.

Example

See the example in this repo for some ideas on how to organize your static data calls using this hook.

Installation

  1. Install
npm i next-data-hooks

or

yarn add next-data-hooks
  1. Add the babel plugin

At the root, add a .babelrc file that contains the following:

{
  "presets": ["next/babel"],
  "plugins": ["next-data-hooks/babel"]
}

⚠️ Don't forget this step. This enables code elimination to eliminate server-side code in client code.

  1. Add the provider to _app.tsx or _app.js
import { AppProps } from 'next/app';
import { NextDataHooksProvider } from 'next-data-hooks';

function App({ Component, pageProps }: AppProps) {
  const { children, ...rest } = pageProps;

  return (
    <NextDataHooksProvider {...rest}>
      <Component {...rest}>{children}</Component>
    </NextDataHooksProvider>
  );
}

Usage

  1. Create a data hook. This can be in the same file as the component you're using it in or anywhere else.
import { createDataHook } from 'next-data-hooks';

// this context is the GetStaticPropsContext from 'next'
//                                                      👇
const useBlogPost = createDataHook('BlogPost', async (context) => {
  const slug = context.params?.slug as string;

  // do something async to grab the data your component needs
  const blogPost = /* ... */;

  return blogPost;
});

export default useBlogPost;
TypeScript User?

Note: For TypeScript users, if you're planning on only using the data hook in the context of getServerSideProps, you can import the provided type guard, isServerSidePropsContext, to narrow the type of the incoming context.

import { createDataHook, isServerSidePropsContext } from 'next-data-hooks';

const useServerSideData = createDataHook('Data', async (context) => {
  if (!isServerSidePropsContext(context)) {
    throw new Error('This data hook only works in getServerSideProps.');
  }

  // here, the type of `context` has been narrowed to the server side conext
  const query = context.req.query;
});

export default useServerSideData;
  1. Use the data hook in a component. Add it to a static prop in an array with other data hooks to compose them downward.
import ComponentThatUsesDataHooks from '..';
import useBlogPost from '..';
import useOtherDataHook from '..';

function BlogPostComponent() {
  const { title, content } = useBlogPost();
  const { other, data } = useOtherDataHook();

  return (
    <article>
      <h1>{title}</h1>
      <p>{content}</p>
      <p>
        {other} {data}
      </p>
    </article>
  );
}

// compose together other data hooks
BlogPostComponent.dataHooks = [
  ...ComponentThatUsesDataHooks.dataHooks,
  useOtherDataHooks,
  useBlogPost,
];

export default BlogPostComponent;
  1. Pass the data hooks down in getStaticProps or getServerSideProps.
import { getDataHooksProps } from 'next-data-hooks';
import { GetStaticPaths, GetStaticProps } from 'next';
import BlogPostComponent from '..';

export const getStaticPaths: GetStaticPaths = async (context) => {
  // return static paths...
};

// NOTE: this will also work with `getServerSideProps`
export const getStaticProps: GetStaticProps = async (context) => {
  const dataHooksProps = await getDataHooksProps({
    context,
    // this is an array of all data hooks from the `dataHooks` static prop.
    //                             👇👇👇
    dataHooks: BlogPostComponent.dataHooks,
  });

  return {
    props: {
      // spread the props required by next-data-hooks
      ...dataHooksProps,

      // add additional props to Next.js here
    },
  };
};

export default BlogPostComponent;

Useful Patterns

A separate routes directory

Next.js has a very opinionated file-based routing mechanism that doesn't allow you to put a file in the /pages folder without it being considered a page.

Simply put, this doesn't allow for much organization.

With next-data-hooks, you can treat the /pages folder as a folder of entry points and organize files elsewhere.

my-project
# think of the pages folder as entry points to your routes
├── pages
│   ├── blog
│   │   ├── [slug].ts
│   │   └── index.ts
│   └── shop
│       ├── category
│       │   └── [slug].ts
│       ├── index.ts
│       └── product
│           └── [slug].ts
|
# think of each route folder as its own app with it's own components and helpers
└── routes
    ├── blog
    │   ├── components
    │   │   ├── blog-index.tsx
    │   │   ├── blog-post-card.tsx
    │   │   └── blog-post.tsx
    │   └── helpers
    │       └── example-blog-helper.ts
    └── shop
        ├── components
        │   ├── category.tsx
        │   ├── product-description.tsx
        │   └── product.tsx
        └── helpers
            └── example-shop-helper.ts

/routes/blog/components/blog-post.tsx

import { createDataHook } from 'next-data-hooks';

// write your data hook in a co-located place
const useBlogPostData = createDataHook('BlogPost', async (context) => {
  const blogPostData = // get blog post data…
  return blogPostData;
});

function BlogPost() {
  // use it in the component
  const { title, content } = useBlogPostData();

  return (
    <article>
      <h1>{title}</h1>
      <p>{content}</p>
    </article>
  );
}

BlogPost.dataHooks = [useBlogPostData];

export default BlogPost;

/pages/blog/[slug].ts

import { GetStaticProps, GetStaticPaths } from 'next';
import { getDataHooksProps } from 'next-data-hooks';
import BlogPost from 'routes/blog/components/blog-post';

export const getStaticPaths: GetStaticPaths = {}; /* ... */

export const getStaticProps: GetStaticProps = async (context) => {
  const dataHooksProps = getDataHooksProps({
    context,
    dataHooks: BlogPost.dataHooks,
  });
  return { props: dataHooksProps };
};

// re-export your component. this file is just an entry point
export default BlogPost;

👋 Note: the above is just an example of how you can use next-data-hooks to organize your project. The main takeaway is that you can re-export page components to change the structure and next-data-hooks works well with this pattern.

Composing data hooks

Each data hook exposes a getData method which is simply the function you pass into createDataHook.

This can be used within other data hooks to pull the same data:

import { createDataHook } from 'next-data-hooks';

const useHook = createDataHook('DataHook', async (context) => {
  return; // ...
});

export default useHook;
import useHook from './';

const useOtherHook = createDataHook('Other', async (context) => {
  const data = await useHook.getData(context);

  // use data to do something…
});

👋 Note: Be aware that this method re-runs the function.

Code elimination

For smaller bundles, Next.js eliminates code that is only intended to run inside getStaticProps.

next-data-hooks does the same by a babel plugin that prefixes your data hook definition with typeof window !== 'undefined' ? : .

This works because Next.js pre-evaluates the expression typeof window to 'object' in browsers. This will make the above ternary always evaluate to the in the browser. Terser then shakes away the expression eliminating it from the browser bundle.

If you saw the error Create data hook was run in the browser. then something may have went wrong with the code elimination. Please open an issue.

👋 Note. There may be differences in Next.js's default code elimination and next-data-hooks code elimination. Double check your bundle.

GitHub

https://github.com/ricokahler/next-data-hooks
Comments
  • 1. Generate .dataHooks, getStaticProps, and getServerSideProps with babel.

    This is currently a Draft PR to show and discuss progress on this feature. It is not stable or fully tested, but it should work. If this is too much of a change to the project, I can keep this as my own fork.


    This PR reduces code required to use of the package by having the babel plugin do more transformations, generating the .dataHooks array, getStaticProps, and getServerSideProps. The plugin has different behavior on the client and the server, meaning the .dataHooks array is only generated on the server.

    Babel Plugin Changes

    Generating .dataHooks

    On the server side compilation, for any function that looks like a react component or react hook (regex [A-Z][a-z] and use[A-Z]), then finds all references to other variables that look like components/hooks, then generates a line like this after the function.

    function Component() { ... }
    
    Component.dataHooks = createDataHookArray(useData, useState, Header, Button)
    

    The createDataHook function filters through it’s values and returns an array of Data Hooks by filtering it’s arguments for:

    • objects with .getData -> add itself to the array; it’s a data hook.
    • objects with .dataHooks -> add the contents to the array, it’s a data hook array.

    Generating getStaticProps/getServerSideProps

    EDIT: for simplicity sake this was removed, but i might work on it as a separate plugin

    For any page file on the server side, it tries to find an exported getStaticProps or getServerSideProps.

    • if it finds it, then it is rewritten to
    export const getStaticProps = createGetStaticProps(Component.dataHooks, function getStaticProps() { ... })`
    
    • if no getStaticProps or getServerSideProps, then this is added
    export const getStaticProps = createGetStaticProps(Component.dataHooks)`
    

    AKA, it always automatically runs your data hooks, But if you need it to run as getServerSideProps, you must declare a function (even returning an empty object) for it to work.

    Modifying the createDataHook transformation

    [removed]

    API Breaking Changes

    As of the current commit, the package should be backwards compatible api-wise, but the babel transform may not work on existing code that defines .dataHooks already.

    The API also has new functions

    • DataHooksApp, which takes an App component and wraps it in the data hooks context. this reduces the boilerplate just a bit.
    • ~~createServerDataHook, which is just createDataHook but for Server Side Props. the only functional difference right now is that an error will be thrown if it is used in getStaticProps before any data hooks get called. I wanted this to also automatically create a getServerSideProps through babel, but this isn't possible; so now i'm left with this function. We can remove it.~~
    • Some extra utility functions that the babel plugin uses. I would like to move these to a separate bundle to keep them out of the intellisense/auto-complete, but I don't want to modify the build configuration.

    Internal Changes

    ~~Because of createServerDataHook, these three changes happened. Part of me wants to revert them all (but I'd like someone's opinions on it first)~~

    • ~~DataHook has a new property server, which is used to check if a data hook requires gSSP~~
    • ~~getDataHookProps throws an error if you have any server: true hooks without gSSP.~~
    • ~~The useData function was extracted from createDataHook so it could be used in the two hook functions. Currently, it is not publicly exported.~~

    There's also 3 utility functions that the babel plugin auto-imports

    • createDataHooksArray - creates an array of data hooks off of a list of react components / hooks / data hooks
    • ~~createGetStaticProps - creates a getStaticProps/getServerSideProps function~~
    • ~~createClientDataHook - client side createDataHook hook, aka (key) => useData.bind(null, key)~~

    Example

    The modified example is more or less just removing a ton of code from it; and it functions the same. https://github.com/davecaruso/next-data-hooks/tree/babel-magic/examples/next-data-hooks-example


    Thank you for reading, what are your thoughts?

    Reviewed by davecaruso at 2021-03-23 12:25
  • 2. Not working with latest Next

    Great project! Tried to use it with my project, however, it was failing with an error Error: Could not findNextDataHooksContext. EnsureNextDataHooksProvideris configured correctly.

    Tried to debug and ended up cloning the repo and running the example. First run, works (next 10.0.1), then proceeded to update Next to 10.1.3 (latest). Hit the exception

    Reviewed by ezekielaquino at 2021-04-22 18:44
  • 3. chore(deps): update all (major)

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | Type | Update | |---|---|---|---|---|---|---|---| | @rollup/plugin-node-resolve | 11.2.1 -> 13.3.0 | age | adoption | passing | confidence | devDependencies | major | | @types/react | 17.0.45 -> 18.0.14 | age | adoption | passing | confidence | devDependencies | major | | @types/react-dom | 17.0.17 -> 18.0.5 | age | adoption | passing | confidence | devDependencies | major | | @types/react-test-renderer | 17.0.2 -> 18.0.0 | age | adoption | passing | confidence | devDependencies | major | | @types/webpack | 4.41.32 -> 5.28.0 | age | adoption | passing | confidence | devDependencies | major | | actions/checkout | v2 -> v3 | age | adoption | passing | confidence | action | major | | actions/setup-node | v2 -> v3 | age | adoption | passing | confidence | action | major | | codecov/codecov-action | v1 -> v3 | age | adoption | passing | confidence | action | major | | eslint (source) | 7.32.0 -> 8.18.0 | age | adoption | passing | confidence | devDependencies | major | | eslint-config-react-app | 6.0.0 -> 7.0.1 | age | adoption | passing | confidence | devDependencies | major | | eslint-plugin-flowtype | 5.10.0 -> 8.0.3 | age | adoption | passing | confidence | devDependencies | major |


    Release Notes

    rollup/plugins

    v13.3.0

    2022-05-02

    Features
    • feat: support node: protocol (#​1124)

    v13.2.2

    2022-05-02

    Bugfixes
    • fix: Respect if other plugins resolve the resolution to a different id (#​1181)
    • fix: Revert respect if other plugins resolve the resolution to a different id (ae59ceb)
    • fix: Respect if other plugins resolve the resolution to a different id (f8d4c44)

    v13.2.1

    2022-04-15

    Bugfixes
    • fix: update side effects logic to be deep when glob doesn’t contain / (#​1148)

    v13.2.0

    2022-04-11

    Features
    • feat: Add the ability to pass a function into resolveOnly (#​1152)

    v13.1.3

    2022-01-05

    Bugfixes
    • fix: use correct version when published (#​1063)

    v13.1.2

    2021-12-31

    Bugfixes
    • fix: forward meta-information from other plugins (#​1062)

    v13.1.1

    2021-12-13

    Updates
    • test: add tests for mixing custom exportConditions with browser: true (#​1043)

    v13.1.0

    2021-12-13

    Features
    • feat: expose plugin version (#​1050)

    v13.0.6

    2021-10-19

    Bugfixes

    v13.0.5

    2021-09-21

    Updates
    • docs: fix readme heading depth (#​999)

    v13.0.4

    2021-07-24

    Bugfixes
    • fix: Fix bug where JS import was converted to a TS import, resulting in an error when using export maps (#​921)

    v13.0.3

    2021-07-24

    Bugfixes
    • fix: handle browser-mapped paths correctly in nested contexts (#​920)

    v13.0.2

    2021-07-15

    Bugfixes
    • fix: handle "package.json" being in path (#​927)

    v13.0.1

    2021-07-15

    Updates
    • docs: Document how to get Node.js exports resolution (#​884)

    v13.0.0

    2021-05-04

    Breaking Changes
    • fix!: mark module as external if resolved module is external (#​799)
    Features
    • feat: Follow up to #​843, refining exports and browser field interaction (#​866)
    actions/checkout

    v3

    Compare Source

    actions/setup-node

    v3

    Compare Source

    codecov/codecov-action

    v3

    Compare Source

    v2

    Compare Source

    eslint/eslint

    v8.18.0

    Compare Source

    Features

    • a6273b8 feat: account for rule creation time in performance reports (#​15982) (Nitin Kumar)

    Bug Fixes

    • f364d47 fix: Make no-unused-vars treat for..of loops same as for..in loops (#​15868) (Alex Bass)

    Documentation

    • 4871047 docs: Update analytics, canonical URL, ads (#​15996) (Nicholas C. Zakas)
    • cddad14 docs: Add correct/incorrect containers (#​15998) (Nicholas C. Zakas)
    • b04bc6f docs: Add rules meta info to rule pages (#​15902) (Nicholas C. Zakas)
    • 1324f10 docs: unify the wording referring to optional exception (#​15893) (Abdelrahman Elkady)
    • ad54d02 docs: add missing trailing slash to some internal links (#​15991) (Milos Djermanovic)
    • df7768e docs: Switch to version-relative URLs (#​15978) (Nicholas C. Zakas)
    • 21d6479 docs: change some absolute links to relative (#​15970) (Milos Djermanovic)
    • f31216a docs: Update README team and sponsors (ESLint Jenkins)

    Build Related

    • ed49f15 build: remove unwanted parallel and image-min for dev server (#​15986) (Strek)

    Chores

    • f6e2e63 chore: fix 'replaced by' rule list (#​16007) (Milos Djermanovic)
    • d94dc84 chore: remove unused deprecation warnings (#​15994) (Francesco Trotta)
    • cdcf11e chore: fix versions link (#​15995) (Milos Djermanovic)
    • d2a8715 chore: add trailing slash to pathPrefix (#​15993) (Milos Djermanovic)
    • 58a1bf0 chore: tweak URL rewriting for local previews (#​15992) (Milos Djermanovic)
    • 80404d2 chore: remove docs deploy workflow (#​15984) (Nicholas C. Zakas)
    • 71bc750 chore: Set permissions for GitHub actions (#​15971) (Naveen)
    • 90ff647 chore: avoid generating subdirectories for each page on new docs site (#​15967) (Milos Djermanovic)

    v8.17.0

    Compare Source

    Features

    • 55319e1 feat: fix indent bug with semicolon-first style (#​15951) (Milos Djermanovic)
    • f6d7920 feat: add allowNamedExports option to no-use-before-define (#​15953) (Milos Djermanovic)

    Bug Fixes

    Documentation

    Chores

    v8.16.0

    Compare Source

    Features

    • cab0c22 feat: add Unicode flag suggestion in no-misleading-character-class (#​15867) (Milos Djermanovic)
    • 38ae956 feat: check Unicode code point escapes in no-control-regex (#​15862) (Milos Djermanovic)
    • ee69cd3 feat: Update global variables (#​15871) (Sébastien Règne)

    Bug Fixes

    • 3f09aab fix: function-paren-newline crash on "new new Foo();" (#​15850) (coderaiser)

    Documentation

    • 050d5f4 docs: Static further reading links (#​15890) (Nicholas C. Zakas)
    • 36287c0 docs: fix absolute paths in related rules shortcode to work from /docs (#​15892) (Milos Djermanovic)
    • 90b6990 docs: fix absolute links in rule macro to work from /docs (#​15891) (Milos Djermanovic)
    • f437249 docs: Adjust docs site path prefix (#​15889) (Nicholas C. Zakas)
    • 6e16025 docs: update 'Related Rules' and 'Further Reading' in remaining rules (#​15884) (Milos Djermanovic)
    • 1d39f69 docs: remove confusing examples for no-mixed-operators (#​15875) (Milos Djermanovic)
    • 3071d76 docs: Fix some grammar issues (#​15837) (byodian)

    Chores

    v8.15.0

    Compare Source

    Features

    • ab37d3b feat: add enforceInClassFields option to no-underscore-dangle (#​15818) (Roberto Cestari)

    Bug Fixes

    • 8bf9440 fix: "use strict" should not trigger strict mode in ES3 (#​15846) (Milos Djermanovic)

    Documentation

    • 28116cc docs: update AST node names link in no-restricted-syntax (#​15843) (Milos Djermanovic)
    • 272965f docs: fix h1 heading on formatters page (#​15834) (Milos Djermanovic)
    • a798166 docs: update example for running individual rule tests (#​15833) (Milos Djermanovic)
    • 57e732b docs: mark SourceCode#getJSDocComment deprecated in working-with-rules (#​15829) (Milos Djermanovic)
    • 9a90abf docs: update docs directory in working-with-rules (#​15830) (Milos Djermanovic)
    • 810adda docs: add more examples for prefer-object-spread (#​15831) (coderaiser)
    • 06b1edb docs: clarify no-control-regex rule (#​15808) (Milos Djermanovic)
    • 9ecd42f docs: Fixed typo in code comment (#​15812) (Addison G)
    • de992b7 docs: remove links to 2fa document (#​15804) (Milos Djermanovic)
    • 5222659 docs: fix 'Related Rules' heading in no-constant-binary-expression (#​15799) (Milos Djermanovic)
    • e70ae81 docs: Update README team and sponsors (ESLint Jenkins)

    Chores

    v8.14.0

    Compare Source

    Features

    • ab6363d feat: Add rule no-constant-binary-expression (#​15296) (Jordan Eldredge)

    Bug Fixes

    • 35fa1dd fix: allow project paths to have URL-encoded characters (#​15795) (Milos Djermanovic)
    • 413f1d5 fix: update astUtils.isDirectiveComment with globals and exported (#​15775) (Milos Djermanovic)

    Build Related

    Chores

    • 735458c chore: add static frontmatter to no-constant-binary-expression docs (#​15798) (Milos Djermanovic)
    • db28f2c chore: Add static frontmatter to docs (#​15782) (Nicholas C. Zakas)
    • 3bca59e chore: markdownlint autofix on commit (#​15783) (Nicholas C. Zakas)

    v8.13.0

    Compare Source

    Features

    • 274acbd feat: fix no-eval logic for this in arrow functions (#​15755) (Milos Djermanovic)

    Bug Fixes

    • 97b57ae fix: invalid operator in operator-assignment messages (#​15759) (Milos Djermanovic)

    Documentation

    • c32482e docs: Typo in space-infix-ops docs (#​15754) (kmin-jeong)
    • f2c2d35 docs: disambiguate types FormatterFunction and LoadedFormatter (#​15727) (Francesco Trotta)

    Chores

    • bb4c0d5 chore: Refactor docs to work with docs.eslint.org (#​15744) (Nicholas C. Zakas)
    • d36f12f chore: remove lib/init from eslint config (#​15748) (Milos Djermanovic)
    • a59a4e6 chore: replace trimLeft/trimRight with trimStart/trimEnd (#​15750) (Milos Djermanovic)

    v8.12.0

    Compare Source

    Features

    • 685a67a feat: fix logic for top-level this in no-invalid-this and no-eval (#​15712) (Milos Djermanovic)

    Chores

    • 18f5e05 chore: padding-line-between-statements remove useless additionalItems (#​15706) (Martin Sadovy)

    v8.11.0

    Compare Source

    Features

    • 800bd25 feat: add destructuredArrayIgnorePattern option in no-unused-vars (#​15649) (Nitin Kumar)
    • 8933fe7 feat: Catch undefined and Boolean() in no-constant-condition (#​15613) (Jordan Eldredge)
    • f90fd9d feat: Add ESLint favicon to the HTML report document (#​15671) (Mahdi Hosseinzadeh)
    • 57b8a57 feat: valid-typeof always ban undefined (#​15635) (Zzzen)

    Bug Fixes

    • 6814922 fix: escaping for square brackets in ignore patterns (#​15666) (Milos Djermanovic)
    • c178ce7 fix: extend the autofix range in comma-dangle to ensure the last element (#​15669) (Milos Djermanovic)

    Documentation

    • c481cec docs: add fast-eslint-8 to atom integrations (userguide) (#​15695) (db developer)
    • d2255db docs: Add clarification about eslint-enable (#​15680) (dosisod)
    • 8b9433c docs: add object pattern to first section of computed-property-spacing (#​15679) (Milos Djermanovic)
    • de800c3 docs: link to minimatch docs added. (#​15688) (Gaurav Tewari)
    • 8f675b1 docs: sort-imports add single named import example (#​15675) (Arye Eidelman)

    Chores

    v8.10.0

    Compare Source

    Features

    • 6e2c325 feat: Add ignoreOnInitialization option to no-shadow rule (#​14963) (Soufiane Boutahlil)
    • 115cae5 feat: --debug prints time it takes to parse a file (#​15609) (Bartek Iwańczuk)
    • 345e70d feat: Add onlyOneSimpleParam option to no-confusing-arrow rule (#​15566) (Gautam Arora)

    Bug Fixes

    • cdc5802 fix: Avoid __dirname for built-in configs (#​15616) (DoZerg)
    • ee7c5d1 fix: false positive in camelcase with combined properties (#​15581) (Nitin Kumar)

    Documentation

    Chores

    v8.9.0

    Compare Source

    Features

    • 68f64a9 feat: update eslint-scope to ignore "use strict" directives in ES3 (#​15595) (Milos Djermanovic)
    • db57639 feat: add es2016, es2018, es2019, and es2022 environments (#​15587) (Milos Djermanovic)
    • 2dc38aa feat: fix bug with arrow function return types in function-paren-newline (#​15541) (Milos Djermanovic)
    • 6f940c3 feat: Implement FlatRuleTester (#​15519) (Nicholas C. Zakas)

    Documentation

    • 570a036 docs: add one-var example with for-loop initializer (#​15596) (Milos Djermanovic)
    • 417191d docs: Remove the $ prefix in terminal commands (#​15565) (Andreas Lewis)
    • 389ff34 docs: add missing Variable#scope property in the scope manager docs (#​15571) (Milos Djermanovic)
    • f63795d docs: no-eval replace dead link with working one (#​15568) (rasenplanscher)
    • 0383591 docs: Remove old Markdown issue template (#​15556) (Brandon Mills)
    • a8dd5a2 docs: add 'when not to use it' section in no-duplicate-case docs (#​15563) (Milos Djermanovic)
    • 1ad439e docs: add missed verb in docs (#​15550) (Jeff Mosawy)

    Chores

    v8.8.0

    Compare Source

    Features

    Documentation

    v8.7.0

    Compare Source

    Features

    • 19ad061 feat: no-restricted-imports support casing (#​15439) (gfyoung)
    • 564ecdb feat: Support arbitrary module namespace names in no-restricted-imports (#​15491) (Milos Djermanovic)
    • 968a02a feat: Support arbitrary module namespace names in no-useless-rename (#​15493) (Milos Djermanovic)
    • 0d2b9a6 feat: move eslint --init to @​eslint/create-config (#​15150) (唯然)
    • 127f524 feat: false negative with property option in id-match (#​15474) (Nitin Kumar)
    • 359b2c1 feat: Support arbitrary module namespace names in the camelcase rule (#​15490) (Milos Djermanovic)
    • 3549571 feat: Support arbitrary module namespace names in the quotes rule (#​15479) (Milos Djermanovic)
    • 5563c45 feat: Support arbitrary module namespace names in keyword-spacing (#​15481) (Milos Djermanovic)
    • fd3683f feat: Support arbitrary module namespace names in no-restricted-exports (#​15478) (Milos Djermanovic)

    Bug Fixes

    • a8db9a5 fix: no-invalid-this false positive in class field initializer (#​15495) (Milos Djermanovic)
    • 02d6426 fix: Correctly consume RuleTester statics (#​15507) (Brad Zacher)
    • db15802 fix: Add property fatalErrorCount to ignored file results (#​15520) (Francesco Trotta)
    • 03ac8cf fix: Prevent false positives with no-constant-condition (#​15486) (Jordan Eldredge)

    Documentation

    • f50f849 docs: Update CLI docs to prefer local install (#​15513) (Nicholas C. Zakas)
    • 0469eb1 docs: Update shell code fences for new website (#​15522) (Olga)

    Chores

    v8.6.0

    Compare Source

    Features

    • 6802a54 feat: handle logical assignment in no-self-assign (#​14152) (Zzzen)
    • 3b38018 feat: allow to define eslint-disable-next-line in multiple lines (#​15436) (Nitin Kumar)
    • 9d6fe5a feat: false negative with onlyDeclarations + properties in id-match (#​15431) (Nitin Kumar)

    Documentation

    Chores

    • 3a384fc chore: Upgrade espree to 9.3.0 (#​15473) (Brandon Mills)
    • 1443cc2 chore: Update blogpost.md.ejs (#​15468) (Nicholas C. Zakas)
    • 28e907a refactor: remove unused parameter in linter.js (#​15451) (Milos Djermanovic)
    • eaa08d3 test: add tests for allowReserved parser option with flat config (#​15450) (Milos Djermanovic)

    v8.5.0

    Compare Source

    Features
    Bug Fixes
    • 7d832d4 fix: improve prefer-template fixer (#​15230) (Nitin Kumar)
    • 981fb48 fix: do not report global references in id-match rule (#​15420) (Nitin Kumar)
    • f13d4a6 fix: improve autofix of prefer-object-has-own (#​15419) (Nitin Kumar)
    • f4559a0 fix: add helpful message when test case has non-string code/name (#​15425) (Bryan Mishkin)
    Documentation
    • 314c84c docs: add an incorrect code example in for-direction (#​15434) (Holger Jeromin)
    • 3928175 docs: add destructuring examples for computed-property-spacing (#​15423) (Nitin Kumar)
    • a53e59e docs: add more examples for array-element-newline rule (#​15427) (Nitin Kumar)
    • 74cf0a0 docs: update CLA info (#​15370) (Nitin Kumar)
    • e84195e docs: fix heading level for an option in class-methods-use-this rule (#​15399) (Takuya Fukuju)
    Chores
    • 225f211 test: add destructuring test cases for computed-property-spacing (#​15424) (Nitin Kumar)
    • f2c7ba6 ci: use node v16 for macOS and windows jobs (#​15418) (Nitin Kumar)

    v8.4.1

    [Compare Source](


    Configuration

    📅 Schedule: Branch creation - "before 3am on Monday" (UTC), Automerge - At any time (no schedule defined).

    🚦 Automerge: Enabled.

    Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

    👻 Immortal: This PR will be recreated if closed unmerged. Get config help if that's undesired.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    Reviewed by renovate[bot] at 2021-04-26 02:01
  • 4. chore(deps): update all

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | prettier (source) | 2.6.2 -> 2.7.1 | age | adoption | passing | confidence | | rollup (source) | 2.75.6 -> 2.75.7 | age | adoption | passing | confidence | | typescript (source) | 4.7.3 -> 4.7.4 | age | adoption | passing | confidence |


    Release Notes

    prettier/prettier

    v2.7.1

    Compare Source

    diff

    Keep useful empty lines in description (#​13013 by @​chimurai)

    v2.7.0

    Compare Source

    """ First line Second Line """ type Person { name: String }

    rollup/rollup

    v2.75.7

    Compare Source

    2022-06-20

    Bug Fixes
    • Mark Array.prototype.group/groupToMap as side effect free. (#​4531)
    Pull Requests
    Microsoft/TypeScript

    v4.7.4

    Compare Source

    For release notes, check out the release announcement.

    For the complete list of fixed issues, check out the

    Downloads are available on:


    Configuration

    📅 Schedule: Branch creation - "before 3am on Monday" (UTC), Automerge - At any time (no schedule defined).

    🚦 Automerge: Enabled.

    Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

    👻 Immortal: This PR will be recreated if closed unmerged. Get config help if that's undesired.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    Reviewed by renovate[bot] at 2022-06-20 00:50
  • 5. chore(deps): update babel monorepo to v7.18.5

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @babel/core (source) | 7.18.2 -> 7.18.5 | age | adoption | passing | confidence | | @babel/node (source) | 7.17.10 -> 7.18.5 | age | adoption | passing | confidence | | @babel/plugin-transform-runtime (source) | 7.18.2 -> 7.18.5 | age | adoption | passing | confidence |


    Release Notes

    babel/babel

    v7.18.5

    Compare Source

    :bug: Bug Fix
    :memo: Documentation
    :house: Internal
    :running_woman: Performance

    Configuration

    📅 Schedule: Branch creation - "before 3am on Monday" (UTC), Automerge - At any time (no schedule defined).

    🚦 Automerge: Enabled.

    Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about these updates again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    Reviewed by renovate[bot] at 2022-06-20 00:50
  • 6. chore(deps): update dependency eslint-plugin-react-hooks to v4.5.0

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | eslint-plugin-react-hooks (source) | 4.3.0 -> 4.5.0 | age | adoption | passing | confidence |


    Release Notes

    facebook/react

    v4.4.0

    • No changes, this was an automated release together with React 18.

    Configuration

    📅 Schedule: Branch creation - "before 3am on Monday" (UTC), Automerge - At any time (no schedule defined).

    🚦 Automerge: Enabled.

    Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    Reviewed by renovate[bot] at 2022-06-13 02:08
  • 7. chore(deps): update dependency rollup to v2.75.6

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | rollup (source) | 2.75.5 -> 2.75.6 | age | adoption | passing | confidence |


    Release Notes

    rollup/rollup

    v2.75.6

    Compare Source

    2022-06-07

    Bug Fixes
    • Properly deoptimize "this" when using member expressions with getters/setters in for loops and update expressions (#​4522)
    Pull Requests

    Configuration

    📅 Schedule: Branch creation - "before 3am on Monday" (UTC), Automerge - At any time (no schedule defined).

    🚦 Automerge: Enabled.

    Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    Reviewed by renovate[bot] at 2022-06-13 02:07
  • 8. chore(deps): update dependency @types/jest to v27.5.2

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @types/jest | 27.4.1 -> 27.5.2 | age | adoption | passing | confidence |


    Configuration

    📅 Schedule: Branch creation - "before 3am on Monday" (UTC), Automerge - At any time (no schedule defined).

    🚦 Automerge: Enabled.

    Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    Reviewed by renovate[bot] at 2022-06-06 00:45
  • 9. chore(deps): update all

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | rollup (source) | 2.75.3 -> 2.75.5 | age | adoption | passing | confidence | | typescript (source) | 4.7.2 -> 4.7.3 | age | adoption | passing | confidence |


    Release Notes

    rollup/rollup

    v2.75.5

    Compare Source

    2022-06-01

    Bug Fixes
    • Avoid crashes when using logical expressions for unused constructor arguments (#​4519)
    • Fix missing parameter defaults for calls from try statements and functions returned by functions (#​4520)
    Pull Requests

    v2.75.4

    Compare Source

    2022-05-31

    Bug Fixes
    • Ensure parameter defaults are retained when a function is used as an object property (#​4516)
    Pull Requests
    Microsoft/TypeScript

    v4.7.3

    Compare Source

    For release notes, check out the release announcement.

    For the complete list of fixed issues, check out the

    Downloads are available on:


    Configuration

    📅 Schedule: Branch creation - "before 3am on Monday" (UTC), Automerge - At any time (no schedule defined).

    🚦 Automerge: Enabled.

    Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

    👻 Immortal: This PR will be recreated if closed unmerged. Get config help if that's undesired.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    Reviewed by renovate[bot] at 2022-06-06 00:45
  • 10. chore(deps): update all

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | rollup (source) | 2.74.1 -> 2.75.3 | age | adoption | passing | confidence | | typescript (source) | 4.6.4 -> 4.7.2 | age | adoption | passing | confidence |


    Release Notes

    rollup/rollup

    v2.75.3

    Compare Source

    2022-05-29

    Bug Fixes
    • Retain parameter defaults for functions that are defaults themselves (#​4515)
    • Track mutations for objects as default values (#​4515)
    Pull Requests

    v2.75.2

    Compare Source

    v2.75.1

    Compare Source

    2022-05-28

    Pull Requests

    v2.75.0

    Compare Source

    2022-05-27

    Features
    • Re-implement default parameter tree-shaking for top-level functions (#​4510)
    • Do not consider calling string methods like .trim() on template literals a side effect (#​4511)
    Pull Requests
    Microsoft/TypeScript

    v4.7.2

    Compare Source

    For release notes, check out the release announcement.

    For the complete list of fixed issues, check out the

    Downloads are available on:


    Configuration

    📅 Schedule: "before 3am on Monday" (UTC).

    🚦 Automerge: Enabled.

    Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

    👻 Immortal: This PR will be recreated if closed unmerged. Get config help if that's undesired.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    Reviewed by renovate[bot] at 2022-05-30 00:59
  • 11. chore(deps): update babel monorepo to v7.18.2

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @babel/core (source) | 7.18.0 -> 7.18.2 | age | adoption | passing | confidence | | @babel/plugin-transform-runtime (source) | 7.18.0 -> 7.18.2 | age | adoption | passing | confidence | | @babel/preset-env (source) | 7.18.0 -> 7.18.2 | age | adoption | passing | confidence |


    Release Notes

    babel/babel

    v7.18.2

    Compare Source

    :bug: Bug Fix
    • babel-plugin-transform-template-literals
    • babel-helpers
    • babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime
    • babel-helper-environment-visitor, babel-helper-replace-supers, babel-plugin-proposal-class-properties, babel-plugin-proposal-decorators, babel-traverse, babel-types
    :memo: Documentation
    :house: Internal

    Configuration

    📅 Schedule: "before 3am on Monday" (UTC).

    🚦 Automerge: Enabled.

    Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about these updates again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    Reviewed by renovate[bot] at 2022-05-30 00:59
  • 12. Dependency Dashboard

    This issue provides visibility into Renovate updates and their statuses. Learn more

    Awaiting Schedule

    These updates are awaiting their schedule. Click on a checkbox to get an update now.

    • [ ] chore(deps): update dependency eslint-plugin-react-hooks to v4.6.0
    • [ ] chore(deps): update typescript-eslint monorepo to v5.29.0 (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
    • [ ] chore(deps): update jest monorepo to v28 (major) (@types/jest, jest)
    • [ ] chore(deps): update react monorepo to v18 (major) (react, react-dom, react-test-renderer)

    Detected dependencies

    github-actions
    .github/workflows/test.yml
    • actions/checkout v3
    • actions/setup-node v3
    • codecov/codecov-action v3
    npm
    package.json
    • @babel/core 7.18.5
    • @babel/node 7.18.5
    • @babel/plugin-transform-runtime 7.18.5
    • @babel/preset-env 7.18.2
    • @babel/preset-react 7.17.12
    • @babel/preset-typescript 7.17.12
    • @ricokahler/exec 1.1.0
    • @rollup/plugin-babel 5.3.1
    • @rollup/plugin-node-resolve 13.3.0
    • @types/common-tags 1.8.1
    • @types/jest 27.5.2
    • @types/react 18.0.14
    • @types/react-dom 18.0.5
    • @types/react-test-renderer 18.0.0
    • @types/webpack 5.28.0
    • @typescript-eslint/eslint-plugin 5.28.0
    • @typescript-eslint/parser 5.28.0
    • babel-eslint 10.1.0
    • common-tags 1.8.2
    • create-next-app 12.1.6
    • eslint 8.18.0
    • eslint-config-react-app 7.0.1
    • eslint-plugin-flowtype 8.0.3
    • eslint-plugin-import 2.26.0
    • eslint-plugin-jsx-a11y 6.5.1
    • eslint-plugin-react 7.30.0
    • eslint-plugin-react-hooks 4.5.0
    • folder-hash 4.0.2
    • jest 27.5.1
    • next 12.1.6
    • prettier 2.7.1
    • react 17.0.2
    • react-dom 17.0.2
    • react-error-boundary 3.1.4
    • react-test-renderer 17.0.2
    • rollup 2.75.7
    • typescript 4.7.4
    • react ^16.8 || ^17
    • next ^9.3 || ^10 || ^11.0.0 || ^12.0.0

    • [ ] Check this box to trigger a request for Renovate to run again on this repository
    Reviewed by renovate[bot] at 2021-04-03 00:21
  • 13. generate .dataHooks and getStaticProps with the babel plugin

    Component.dataHooks always is an array of the data hooks from other components and the createDataHook function.

    similarly getStaticProps, unless extra static props are desired, is also the same every time you write it: calling getDataHooksProps.

    couldn't both of these be generated by the babel plugin? from my little experience from using babel, this shouldn't be too tricky to make, and it would reduce a lot of extra code that is copied from page to page, and eliminates the chance of missing a step.

    the only issue here would be how to know weather to use getStaticProps or getServerSideProps, since you can't tell that from the hook usage themselves.

    i'd like to try to implement this, maybe as an optional thing you need to enable. what are your thoughts?

    Reviewed by davecaruso at 2021-03-19 19:58
Use-p2 - React hooks for p2-es. Use this in combination with react-three-fiber

yarn add @react-three/p2 React hooks for p2-es. Use this in combination with re

Jun 6, 2022
👩‍🍳 A React Hooks utility library containing popular customized hooks
👩‍🍳 A React Hooks utility library containing popular customized hooks

React Recipes A React Hooks utility library containing popular customized hooks What's your favorite dish? npm i react-recipes --save yarn add react-r

Jun 16, 2022
🔥 A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development 🔥
🔥 A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development 🔥

A collection of beautiful (and hopefully useful) React hooks to speed-up your components and hooks development ?? Live playground here ?? ???? English

Jun 22, 2022
Learn the more advanced React hooks and different patterns to enable great developer APIs for custom hooks
Learn the more advanced React hooks and different patterns to enable great developer APIs for custom hooks

?? Advanced React Hooks ?? EpicReact.Dev Learn the more advanced React hooks and different patterns to enable great developer APIs for custom hooks. W

Mar 15, 2022
ReactJs Custom hooks, component lifecycle - Indispensable hooks

ReactJs Custom hooks, component lifecycle - Indispensable hooks

Jun 16, 2022
React Native APIs turned into React Hooks for use in functional React components
React Native APIs turned into React Hooks for use in functional React components

React Native Hooks React Native APIs turned into React Hooks allowing you to access asynchronous APIs directly in your functional components. Note: Yo

Jun 22, 2022
:tada: React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!
:tada: React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!

react-universal-hooks React Universal Hooks : just use****** everywhere. Support React >= 16.8.0 Installation Using npm: $ npm install --save react-un

Jun 12, 2022
React-api-query - Hooks to use react-query with a typed API client

?? react-api-query Hooks to use react-query with a typed API client. More types,

Feb 4, 2022
Use immer to drive state with a React hooks

use-immer A hook to use immer as a React hook to manipulate state. Installation npm install immer use-immer API useImmer useImmer(initialState) is ver

Jun 21, 2022
Simple package to use Socket.io with React hooks.

Simple package to use Socket.io with React hooks.

Jan 24, 2022
Custom hooks to use breakpoints for React 🎐 🔨

use-tailwind-breakpoint Custom hooks to use breakpoints for React ?? ?? Table of contents Installing Usage Resolve from Tailwind CSS configuration Ext

Jun 15, 2022
⌨️Use react hooks for typing effect easily
⌨️Use react hooks for typing effect easily

react-typewriter-hook ⌨️ Use react hooks for typing effect easily Sample Install npm i react-typewriter-hook --save Example View example at codesandbo

May 20, 2022
Use-obs-studio - React Hooks for working with OBS Studio's obs-browser plugin

use-obs-studio React hooks for working with the obs-browser JS bindings. Install

Jan 18, 2022
Simple and powerful API client for react. Use hooks to fetch data in easy way.

Simple and powerful API client for react. Use hooks to fetch data in easy way.

Apr 2, 2022
Use-ref-deps-effect - Effect hooks that support ref.current dependency

use-ref-deps-effect Effect hooks that support "ref.current" dependency Install n

Jun 22, 2022
React-cache-api - React Cache API is a React Hooks library for data fetching

React Cache API React Cache API is a React Hooks library for data fetching. It w

Jun 7, 2022
Lightweight React bindings for MobX based on React 16.8 and Hooks

mobx-react-lite ?? ?? ?? This repo has been moved to mobx This is a lighter version of mobx-react which supports React functional components only and

Jun 26, 2022
A delightful modal dialog component for React, built from the ground up to support React Hooks.
A delightful modal dialog component for React, built from the ground up to support React Hooks.

?? modali A delightful modal dialog library for React, built from the ground up to support React Hooks. Modali provides a simple interface to build be

Jun 4, 2022
React Redux binding with React Hooks and Proxy
React Redux binding with React Hooks and Proxy

There are several projects related to this repo. Here's the index of those. reactive-react-redux v5-alpha (this repo): This has an experimental react-

May 28, 2022