Rule clash when using no-useless-undefined, no-null, TypeScript and React.createContext

[kachkaev]

I added plugin:unicorn/recommended to a few side projects and my code got noticeably more coherent. Great plugin folks!

I have noticed one interesting clash between linting rules and wonder if it can be addressed by the plugin. Here’s my original TypeScript code (before Unicorn):

import * as React from "react";

interface MyContextValue {
  x: number;
  y: string;
};

export const MyContext = React.createContext<MyContextValue | null>(null);

export const useMyContext = (): MyContextValue => {
  const result = React.useContext(MyContext);
  if (result === null) {
    throw new Error("No MyContext value available");
  }
  return result;
}

Once I added recommended Unicorn rules, I got saw near error near export const MyContext): Use `undefined` instead of `null` (unicorn/no-null). Me: OK,

 import * as React from "react";

 interface MyContextValue {
   x: number;
   y: string;
 };

-export const MyContext = React.createContext<MyContextValue | null>(null);
+export const MyContext = React.createContext<MyContextValue | undefined>(undefined);

 export const useMyContext = (): MyContextValue => {
   const result = React.useContext(MyContext);
-  if (result === null) {
+  if (result === undefined) {
     throw new Error("No MyContext value available");
   }
   return result;
 }

Unicron: Do not use useless `undefined` (unicorn/no-useless-undefined). Me: OK,

-export const MyContext = React.createContext<MyContextValue | undefined>(undefined);
+export const MyContext = React.createContext<MyContextValue | undefined>();

TypeScript: Expected 1 arguments, but got 0.. Me: React typings must be incomplete and I should submit a PR that allows omitting undefined. React typings:

    function createContext<T>(
        // If you thought this should be optional, see
        // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/24509#issuecomment-382213106
        defaultValue: T,
    ): Context<T>;

Link: DefinitelyTyped/DefinitelyTyped#24509 (comment). Me: Hmm, this looks like a dead end 😅

Assuming that we can’t easily update React typings, looks like we should either:

• allow null in createContext / React.createContext
  or
• stop marking undefined as useless if it’s an argument of createContext / React.createContext.

In the meantime, my workaround is:

+ // eslint-disable-next-line unicorn/no-useless-undefined
 const MyContext = React.createContext<MyContextValue | undefined>(undefined);

or:

 // .eslintrc.cjs
 module.exports = {
   extends: [
     "...",
     "plugin:unicorn/recommended",
   ],
+  rules: {
+    "unicorn/no-useless-undefined": "off", // https://github.com/sindresorhus/eslint-plugin-unicorn/issues/1684
+  },
 };

For the record, I am using eslint-plugin-unicorn@40.0.0 and @types/react@17.0.38. WDYT folks?

[fisker]

I think

stop marking undefined as useless if it’s an argument of createContext / React.createContext.

Make sense.

[fisker]

In case you missed, we also have checkArguments option in no-useless-undefined rule, https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/no-useless-undefined.md#checkarguments

[kachkaev]

👋 Thanks for sharing your thoughts @fisker! See #1688 👀