Disallow usage of hooks in directory

Question

Consider the following code in a "helper" module, which should not contains hooks.

//helpers/helpers.ts

import { useState } from 'react';

export function testLower() {
  const [a, setAt] = useState('');
}

export function TestLower() {
  const [a, setAt] = useState('');
}

The Eslint Plugin is able to detect, that the code in the lower-case function (testLower) contains a hook and throws a linting error.

But in the TestLower upper-case function - there is no error. This is because it "could" be a component identified by the UpperCase name, I would assume. In this case the hooks plugin does not have a chance of detecting the violation.

Since this slipped our code-review before - I would like to know:

Is there a way to disallow hooks with Eslint in a certain directory or module file in a code base?

Answer 1

I tend to favor good documentation, communication and team consensus on these topics over scripted handcuffs. If I absolutely need to reach this point then I'd try using a custom script that would run along eslint on your build process and/or pipelines.

/* 
 * noReactHooksAllowed.js
 *
 * usage
 * node ./noReactHooksAllowed.js path/to/dir
 */

const fs = require('fs');
const dir = process.argv[2];

fs.readdirSync(dir).forEach(filename => {
  const file = dir + '/' + filename;
  console.log("Checking:", file);
  try {
    const sourceCode = fs.readFileSync(file, 'utf8');
    if (/(useState|useEffect)/.test(sourceCode)) {
      console.error("You shall not pass!");
      console.error("Please remove react hooks from", file);
      process.exit(1);
    }
  } catch (err) {
    console.error(err);
  }
});

console.log("No naughty hooks used here, carry on :)");
process.exit(0);

You can call it from your npm scripts and if it fails, the process.exit(1) signal should stop the whole build. This is a simple example but you can change the script to include more custom checks, have better performance with async calls, check just one file, etc.