I am using React Context and I have:

const DocumentContext = createContext<
    [DocumentStateType, React.Dispatch<any>, React.Dispatch<any>]
>([initVal, () => { }, () => { }]);

But my linter plains:

Unexpected empty arrow function @typescript-eslint/no-empty-function

I know I can turn that off in my linting settings, but is there a right way to do it?

I am using React Context and I have:

const DocumentContext = createContext<
    [DocumentStateType, React.Dispatch<any>, React.Dispatch<any>]
>([initVal, () => { }, () => { }]);

But my linter plains:

Unexpected empty arrow function @typescript-eslint/no-empty-function

I know I can turn that off in my linting settings, but is there a right way to do it?

• javascript
• reactjs
• typescript
• eslint
• use-context

• () => undefined? It's the same as () => {}, but the body is not empty – Teneff Commented Jun 28, 2021 at 14:52

3 Answers 3

If you're looking only to suppress linter message you may declare it as:

const DocumentContext = createContext<
    [DocumentStateType, React.Dispatch<any>, React.Dispatch<any>]
>([initVal, () => { /* do nothing */ }, () => { /* do nothing */ }]);

or as:

const DocumentContext = createContext<
    [DocumentStateType, React.Dispatch<any>, React.Dispatch<any>]
>([initVal, () => undefined, () => undefined]);

If you're absolutely sure you're not going to use this default value anywhere. i.e you don't have ponents using this context beyond this context's provider you may simply define it as:

const DocumentContext = createContext<
    [DocumentStateType, React.Dispatch<any>, React.Dispatch<any>]
>(null as any);

You can use the option allowArrowFunctions

Documentation

"@typescript-eslint/no-empty-function": ["error", {"allow": ["arrowFunctions"]}],

If you are using lodash you can use the noop function to bypass linting.

I assume other libraries have similar functions.