A custom ESLint rule to allow static deps in React Hooks ⚛️

Overview

eslint-plugin-react-hooks-static-deps

npm version

A custom ESLint rule to allow static deps in React Hooks ⚛️

Motivation

react-hooks/exhaustive-deps is a really nice ESLint rule to avoid forgetting dependencies in React hooks like useCallback and useMemo.

However, it can become really annoying, especially when you know that one of the "missing" dependencies comes from a custom hook you wrote, and whose return value will likely never change (if it's a function for example).

This package allows you to declare which hooks return values should be ignored in exhaustive-deps checks.

Installation

npm i -D eslint-plugin-react-hooks-static-deps

or

yarn add -D eslint-plugin-react-hooks-static-deps

Usage

  1. Add the plugin to your ESLint config file :
{
  ...
  plugins: [... , "react-hooks-static-deps"]
  ...
}
  1. To avoid conflicts, disable React's default exhaustive-deps rule if you use it :
{
  ...
  rules: {
    ...
    "react-hooks/exhaustive-deps": "off",
    ...
  }
  ...
}
  1. Define which hooks return static values. Example :
{
  ...
  rules: {
    ...
    "react-hooks-static-deps/exhaustive-deps": [
      "warn", // or "error"
      {
        staticHooks: {
          // the whole return value of the hook will be considered static
          useHook: true,

          // for hooks that return an array: here only the second item return by the hook will be considered static
          useArrayHook: [false, true],

          // for hooks that return an object: here only the property prop1 will be considered static
          useObjectHook : {
            prop1: true,
            prop2: false
          }
        }
      }
    ],
    ...
  }
  ...
}
You might also like...

This website was designed to allow viewers complete access to all movie and tv series trailers. It was created using React + MUI

This website was designed to allow viewers complete access to all movie and tv series trailers. It was created using React + MUI

Trailer - Time 👾 Demo https://trailer-time.netlify.app/ 🎯 about This project is a simplified front end clone of some movie webside (like Netflix/Hul

Aug 24, 2022

ESLint plugin for react-hook-form

eslint-plugin-react-hook-form react-hook-form is an awsome library which provide a neat solution for building forms. However, there are many rules for

Nov 22, 2022

react-dialog is a custom react hook to use a dialog easily

react-dialog react-dialog is a custom react hook to use a dialog easily. Documentation To use react-dialog follow the documentation. useDialog Returns

Mar 29, 2022

⚛️ 🚀 A progressive static site generator for React.

⚛️ 🚀 A progressive static site generator for React.

You are viewing the docs for v7 of React Static. You can browse all historical versions via Github branches! React Static A progressive static-site ge

Dec 27, 2022

Drop-in replacements for @apollo/client's useQuery, useMutation and useSubscription hooks with reduced overhead and additional functionality.

apollo-augmented-hooks Drop-in replacements for @apollo/client's useQuery, useMutation and useSubscription hooks with reduced overhead and additional

Nov 18, 2022

preact.js with hooks and ES2021, without compilers

naked preact preact.js with hooks, without compilers Web development should be simple. No compilers, just ES2021 and preact+hooks. See comments in the

Jun 16, 2022

A library of RxJS-related hooks

rxooks GADZOOKS! RXOOKS! (Basically every other iteration of "rxjs", "rx", "react", and "hooks" was taken) This is a library of hooks that are useful

Nov 28, 2022

A npm package to increase the developer experience and consistency by providing a set of hooks that can be opted-in the development lifecycle.

@jeliasson/husky-hooks This npm package aims to increase the developer experience and consistency by providing a set of hooks that can be opted-in the

Dec 6, 2022

Fast, tiny and solid hooks system for Javascript and Node.js

Fast, tiny and solid hooks system for Javascript and Node.js

Uncino 🪝 Fast, tiny and solid hooks system for Javascript and NodeJS Uncino is italian word for hook Do you know Wordpress hooks system? Uncino is a

Dec 7, 2022
React components and hooks for creating VR/AR applications with @react-three/fiber

@react-three/xr React components and hooks for creating VR/AR applications with @react-three/fiber npm install @react-three/xr These demos are real,

Poimandres 1.4k Jan 4, 2023
React Hooks — 👍

Collaborative editing for your app. Support on Kickstarter! ?? react-use Collection of essential React Hooks. Port of libreact. Translations: ???? 汉语

Vadim Dalecky 34.9k Jan 3, 2023
⚛️ Hooks for fetching, caching and updating asynchronous data in React

Hooks for fetching, caching and updating asynchronous data in React Enjoy this library? Try the entire TanStack! React Table, React Form, React Charts

Tanner Linsley 32.1k Jan 9, 2023
React Hooks library for remote data fetching

Introduction swr.vercel.app SWR is a React Hooks library for remote data fetching. The name “SWR” is derived from stale-while-revalidate, a cache inva

Vercel 25.2k Jan 4, 2023
⚛️ Hooks for building fast and extendable tables and datagrids for React

Hooks for building lightweight, fast and extendable datagrids for React Enjoy this library? Try them all! React Query, React Form, React Charts Visit

Tanner Linsley 20.3k Jan 3, 2023
Fully typed hooks and utility functions for the React Native StyleSheet API

react-native-style-utilities Fully typed hooks and utility functions for the React Native StyleSheet API npm i react-native-style-utilities ESLint Set

Marc Rousavy 73 Dec 17, 2022
Redux-Toolkit example with React Hooks CRUD Application, Axios, Rest API, Bootstrap

Redux-Toolkit CRUD example with React Hooks, Axios & Web API Build Redux-Toolkit CRUD application with React Hooks and Rest API calls in that: Each it

null 69 Dec 27, 2022
Built a covid-19 trcaker app using React.js implementing hooks and materail UI

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Aditya Dond 1 Dec 21, 2021
React Hooks tutorial for beginners.

React Hooks for Beginners git clone <url> Clone into the repo code react-hooks Open the folder in VS Code npm install Install the dependencies npm sta

Mohammad Muazam 2 Oct 10, 2022
Add multiplayer presence (live cursors/avatars) to your react application using yjs and hooks

y-presence Easy way to add presence (live cursors/avatars) to any react application using react hooks. Installation yarn add y-presence # or npm i y-p

Nimesh Nayaju 126 Dec 29, 2022