ESLint: React Hook useStyles requires an effect callback. Did you forget to pass a callback to the hook?(react-hooks/exhaustive-deps)

[Efstathios Ntonas]

Description

when trying to const { theme } = useStyles() it throws this typing error:

ESLint: React Hook useStyles requires an effect callback. Did you forget to pass a callback to the hook?(react-hooks/exhaustive-deps)

Related to

• Unistyles core
• Demo
• Docs
• Typings

Steps to reproduce

Expected behavior

As per docs, we should be able to use const { theme } = useStyles() without passing anything to the hook.

Actual behavior

throws typing errors

More Info

Screenshots/Video

Environment

• React Native version: 0.72.5
• react-native-unistyles version: latest rc

Affected platforms

• Android
• iOS
• Web

[Jacek Pudysz]

@efstathiosntonas I don't have such error, but I'm using custom made config.

Can you copy-paste here your .eslintrc?

[Efstathios Ntonas]

click me .eslintrc.json

{
"root": true,
"env": {
  "es6": true,
  "jest/globals": true,
  "node": false,
  "react-native/react-native": true
},
"extends": [
  "@react-native",
  "airbnb-typescript",
  "eslint:recommended",
  "plugin:@typescript-eslint/recommended-type-checked",
  "plugin:@typescript-eslint/stylistic-type-checked",
  "plugin:import/typescript",
  "plugin:jest/recommended",
  "plugin:react-hooks/recommended",
  "plugin:react-native-a11y/all",
  "plugin:react/recommended",
  "prettier"
],
"overrides": [
  {
    "files": ["*.ts", "*.tsx"], // Your TypeScript files extension
    "parserOptions": {
      "project": ["./tsconfig.json"] // Specify it only for TypeScript files
    }
  },
  {
    "files": ["*.graphql"],
    "parser": "@graphql-eslint/eslint-plugin",
    "parserOptions": {
      "schema": "/src/graphql.schema.json"
    },
    "plugins": ["@graphql-eslint"],
    "rules": {
      "@graphql-eslint/known-type-names": 1
    }
  }
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
  "ecmaFeatures": {
    "jsx": true
  },
  "project": "./tsconfig.eslint.json"
},
"plugins": [
  "@arthurgeron/react-usememo",
  "@typescript-eslint",
  "import",
  "jsx-expressions",
  "prettier",
  "react",
  "react-hooks",
  "react-native",
  "typescript-sort-keys",
  "unused-imports",
  "usememo-recommendations"
],
"settings": {
  "import/extensions": [".ts", ".tsx", ".d.ts", ".js", ".jsx"],
  "import/external-module-folders": [
    "./typings",
    "node_modules",
    "node_modules/@types"
  ],
  "import/parsers": {
    "@typescript-eslint/parser": [".ts", ".tsx", ".d.ts"]
  },
  "import/resolver": {
    "typescript": {},
    "node": {
      "extensions": [".ts", ".tsx", ".d.ts", ".js", ".jsx"],
      "paths": ["./src"]
    },
    "react": {
      "version": "detect"
    }
  }
},
"rules": {
  "usememo-recommendations/detect-heavy-operations": "warn",
  "no-unsafe-optional-chaining": "warn",
  "no-empty": "warn",
  "import/no-extraneous-dependencies": "off",
  // "@arthurgeron/react-usememo/require-usememo": [2],
  "@typescript-eslint/no-unused-vars": 0,
  "@typescript-eslint/no-redundant-type-constituents": 0,
  "@typescript-eslint/non-nullable-type-assertion-style": 0,
  "@typescript-eslint/prefer-for-of": 0,
  "@typescript-eslint/prefer-function-type": 0,
  "@typescript-eslint/prefer-nullish-coalescing": 0,
  "@typescript-eslint/prefer-optional-chain": 0,
  "@typescript-eslint/prefer-string-starts-ends-with": 0,
  "@typescript-eslint/no-unsafe-declaration-merging": 0,
  "@typescript-eslint/no-unsafe-enum-comparison": 0,
  "@typescript-eslint/ban-tslint-comment": 0,
  "@typescript-eslint/class-literal-property-style": 0,
  "@typescript-eslint/consistent-generic-constructors": 0,
  "@typescript-eslint/consistent-indexed-object-style": 0,
  "@typescript-eslint/consistent-type-assertions": 0,
  "@typescript-eslint/consistent-type-definitions": 0,
  "dot-notation": 0,
  "@typescript-eslint/dot-notation": 0,
  "@typescript-eslint/no-base-to-string": 0,
  "@typescript-eslint/no-confusing-non-null-assertion": 0,
  "@typescript-eslint/no-duplicate-enum-values": 0,
  "@typescript-eslint/no-duplicate-type-constituents": 0,
  "@typescript-eslint/array-type": 0,
  "@typescript-eslint/ban-ts-comment": 0,
  "@typescript-eslint/default-param-last": 0,
  "@typescript-eslint/explicit-module-boundary-types": 0,
  "@typescript-eslint/naming-convention": 0,
  "@typescript-eslint/no-explicit-any": 0,
  "@typescript-eslint/no-floating-promises": 0,
  "@typescript-eslint/no-loop-func": 1,
  "@typescript-eslint/no-misused-promises": 0,
  "@typescript-eslint/no-redeclare": 1,
  "@typescript-eslint/no-shadow": 1,
  "@typescript-eslint/no-unnecessary-type-assertion": 0,
  "@typescript-eslint/no-unsafe-argument": 0,
  "@typescript-eslint/no-unsafe-assignment": 0,
  "@typescript-eslint/no-unsafe-call": 0,
  "@typescript-eslint/no-unsafe-member-access": 0,
  "@typescript-eslint/no-unsafe-return": 0,
  "@typescript-eslint/no-use-before-define": 0,
  "@typescript-eslint/no-var-requires": 0,
  "@typescript-eslint/prefer-regexp-exec": 0,
  "@typescript-eslint/restrict-plus-operands": 0,
  "@typescript-eslint/restrict-template-expressions": 0,
  "array-callback-return": "off",
  "comma-dangle": "off",
  "consistent-return": 0,
  "eslint-comments/no-unlimited-disable": 0,
  "global-require": 0,
  "import/extensions": [
    "warn",
    "ignorePackages",
    {
      "js": "never",
      "jsx": "never",
      "mjs": "never",
      "ts": "never",
      "tsx": "never"
    }
  ],
  "import/named": "off",
  "jsx-expressions/strict-logical-expressions": "error",
  "max-classes-per-file": ["error", 2],
  "no-await-in-loop": 0,
  "no-inner-declarations": 0,
  "no-nested-ternary": 0,
  "no-param-reassign": "off",
  "no-return-assign": "off",
  "no-spaced-func": "off",
  "no-underscore-dangle": 0,
  "no-unstable-nested-components": "off",
  // or "@typescript-eslint/no-unused-vars": "off",
  "no-useless-escape": "off",
  "prefer-template": "off",
  "prettier/prettier": "error",
  "quotes": ["error", "double"],
  "react-hooks/exhaustive-deps": [
    "error",
    {
      "additionalHooks": "(useStyle|useFlatStyle|useFrameProcessor)"
    }
  ],
  "react-native-a11y/has-valid-accessibility-role": 0,
  "react-native-a11y/has-valid-accessibility-state": 0,
  "react-native/no-inline-styles": 0,
  "react/destructuring-assignment": 0,
  "react/display-name": 0,
  "react/jsx-filename-extension": [
    1,
    {
      "extensions": [".jsx", ".tsx"]
    }
  ],
  "react/jsx-key": 0,
  "react/jsx-props-no-spreading": 0,
  "react/no-access-state-in-setstate": 0,
  "react/no-unescaped-entities": 0,
  "react/no-unstable-nested-components": 0,
  "react/no-unused-prop-types": "off",
  "react/prop-types": [
    "error",
    {
      "ignore": ["navigation", "route"]
    }
  ],
  "react/require-default-props": 0,
  "react/state-in-constructor": 0,
  "react/static-property-placement": 0,
  "typescript-sort-keys/interface": 1,
  "typescript-sort-keys/string-enum": 1,
  "unused-imports/no-unused-imports": "error",
  "unused-imports/no-unused-vars": [
    "warn",
    {
      "vars": "all",
      "varsIgnorePattern": "^_",
      "args": "after-used",
      "argsIgnorePattern": "^_"
    }
  ]
},
"ignorePatterns": [
  "**/e2e/*.js",
  ".eslintrc.json",
  ".prettierrc.js",
  "android/",
  "babel.config.js",
  "index.js",
  "ios/",
  "jest.config.js",
  "jest.setup.js",
  "lib/",
  "metro.config.js",
  "node_modules/",
  "react-native-config.js",
  "scripts/"
]
}

[Levi Buzolic]

@efstathiosntonas looks like you've configured this in your ESLint config here:

  "react-hooks/exhaustive-deps": [
    "error",
    {
      "additionalHooks": "(useStyle|useFlatStyle|useFrameProcessor)"
    }
  ],

You're telling ESLint to expect a dependency array for each of those hooks, but useStyle from unistyles doesn't take a dependency array. If you remove useStyle from that config it will resolve the warning.

[Efstathios Ntonas]

Nice catch, this was for another hook I was using in the past and totally forgot it's existance: https://github.com/mrousavy/react-native-style-utilities

Thanks for spotting it!