eslint-plugin-react-hooks

What is eslint-plugin-react-hooks?

The eslint-plugin-react-hooks package is an ESLint plugin that enforces the Rules of Hooks for React. It helps developers to follow the best practices and avoid common pitfalls when using hooks in React components.

What are eslint-plugin-react-hooks's main functionalities?

Rules of Hooks

This feature enforces the rules of hooks, ensuring that hooks are called in the same order on every render and not inside conditions, loops, or nested functions.

/* eslint react-hooks/rules-of-hooks: 'error' */
const MyComponent = () => {
  if (condition) {
    const [value, setValue] = useState(0); // This will cause an error
  }
  return <div>{value}</div>;
};

Exhaustive Dependencies

This feature ensures that all dependencies used inside useEffect, useCallback, and useMemo are properly specified, helping to avoid stale closures and other related bugs.

/* eslint react-hooks/exhaustive-deps: 'warn' */
useEffect(() => {
  // Should include dependencies used inside the effect
}, []); // This will cause a warning if dependencies are omitted

Other packages similar to eslint-plugin-react-hooks

eslint-plugin-react

This package includes linting rules for React and JSX. It is broader in scope than eslint-plugin-react-hooks, covering a wide range of React best practices and potential errors, not limited to hooks.

eslint-plugin-hooks

This is a less popular and potentially less maintained alternative to eslint-plugin-react-hooks. It may offer similar functionality but does not have the same level of community support or frequent updates.

README

eslint-plugin-react-hooks

This ESLint plugin enforces the Rules of Hooks.

It is a part of the Hooks API for React.

Installation

Note: If you're using Create React App, please use react-scripts >= 3 instead of adding it directly.

Assuming you already have ESLint installed, run:

# npm
npm install eslint-plugin-react-hooks --save-dev

# yarn
yarn add eslint-plugin-react-hooks --dev

Then extend the recommended eslint config:

{
  "extends": [
    // ...
    "plugin:react-hooks/recommended"
  ]
}

Custom Configuration

If you want more fine-grained configuration, you can instead add a snippet like this to your ESLint configuration file:

{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

Advanced Configuration

exhaustive-deps can be configured to validate dependencies of custom Hooks with the additionalHooks option. This option accepts a regex to match the names of custom Hooks that have dependencies.

{
  "rules": {
    // ...
    "react-hooks/exhaustive-deps": ["warn", {
      "additionalHooks": "(useMyCustomHook|useMyOtherCustomHook)"
    }]
  }
}

We suggest to use this option very sparingly, if at all. Generally saying, we recommend most custom Hooks to not use the dependencies argument, and instead provide a higher-level API that is more focused around a specific use case.

Valid and Invalid Examples

Please refer to the Rules of Hooks documentation to learn more about this rule.

License

MIT

Changelog

15.0.0 (April 7, 2016)

Major changes

• Initial render now uses document.createElement instead of generating HTML. Previously we would generate a large string of HTML and then set node.innerHTML. At the time, this was decided to be faster than using document.createElement for the majority of cases and browsers that we supported. Browsers have continued to improve and so overwhelmingly this is no longer true. By using createElement we can make other parts of React faster. (@sophiebits in #5205)
• data-reactid is no longer on every node. As a result of using document.createElement, we can prime the node cache as we create DOM nodes, allowing us to skip a potential lookup (which used the data-reactid attribute). Root nodes will have a data-reactroot attribute and server generated markup will still contain data-reactid. (@sophiebits in #5205)
• No more extra <span>s. ReactDOM will now render plain text nodes interspersed with comment nodes that are used for demarcation. This gives us the same ability to update individual pieces of text, without creating extra nested nodes. If you were targeting these <span>s in your CSS, you will need to adjust accordingly. You can always render them explicitly in your components. (@mwiencek in #5753)
• Rendering null now uses comment nodes. Previously null would render to <noscript> elements. We now use comment nodes. This may cause issues if making use of :nth-child CSS selectors. While we consider this rendering behavior an implementation detail of React, it's worth noting the potential problem. (@sophiebits in #5451)
• Functional components can now return null. We added support for defining stateless components as functions in React 0.14. However, React 0.14 still allowed you to define a class component without extending React.Component or using React.createClass(), so we couldn’t reliably tell if your component is a function or a class, and did not allow returning null from it. This issue is solved in React 15, and you can now return null from any component, whether it is a class or a function. (@jimfb in #5884)
• Improved SVG support. All SVG tags are now fully supported. (Uncommon SVG tags are not present on the React.DOM element helper, but JSX and React.createElement work on all tag names.) All SVG attributes that are implemented by the browsers should be supported too. If you find any attributes that we have missed, please let us know in this issue. (@zpao in #6243)

Breaking changes

• No more extra <span>s.
• React.cloneElement() now resolves defaultProps. We fixed a bug in React.cloneElement() that some components may rely on. If some of the props received by cloneElement() are undefined, it used to return an element with undefined values for those props. We’re changing it to be consistent with createElement(). Now any undefined props passed to cloneElement() are resolved to the corresponding component’s defaultProps. (@truongduy134 in #5997)
• ReactPerf.getLastMeasurements() is opaque. This change won’t affect applications but may break some third-party tools. We are revamping ReactPerf implementation and plan to release it during the 15.x cycle. The internal performance measurement format is subject to change so, for the time being, we consider the return value of ReactPerf.getLastMeasurements() an opaque data structure that should not be relied upon. (@gaearon in #6286)

Removed deprecations

These deprecations were introduced nine months ago in v0.14 with a warning and are removed:

• Deprecated APIs are removed from the React top-level export: findDOMNode, render, renderToString, renderToStaticMarkup, and unmountComponentAtNode. As a reminder, they are now available on ReactDOM and ReactDOMServer. (@jimfb in #5832)
• Deprecated addons are removed: batchedUpdates and cloneWithProps. (@jimfb in #5859, @zpao in #6016)
• Deprecated component instance methods are removed: setProps, replaceProps, and getDOMNode. (@jimfb in #5570)
• Deprecated CommonJS react/addons entry point is removed. As a reminder, you should use separate react-addons-* packages instead. This only applies if you use the CommonJS builds. (@gaearon in #6285)
• Passing children to void elements like <input> was deprecated, and now throws an error. (@jonhester in #3372)
• React-specific properties on DOM refs (e.g. this.refs.div.props) were deprecated, and are removed now. (@jimfb in #5495)

New deprecations, introduced with a warning

Each of these changes will continue to work as before with a new warning until the release of React 16 so you can upgrade your code gradually.

• LinkedStateMixin and valueLink are now deprecated due to very low popularity. If you need this, you can use a wrapper component that implements the same behavior: react-linked-input. (@jimfb in #6127)
• Future versions of React will treat <input value={null}> as a request to clear the input. However, React 0.14 has been ignoring value={null}. React 15 warns you on a null input value and offers you to clarify your intention. To fix the warning, you may explicitly pass an empty string to clear a controlled input, or pass undefined to make the input uncontrolled. (@antoaravinth in #5048)
• ReactPerf.printDOM() was renamed to ReactPerf.printOperations(), and ReactPerf.getMeasurementsSummaryMap() was renamed to ReactPerf.getWasted(). (@gaearon in #6287)

New helpful warnings

• If you use a minified copy of the development build, React DOM kindly encourages you to use the faster production build instead. (@sophiebits in #5083)
• React DOM: When specifying a unit-less CSS value as a string, a future version will not add px automatically. This version now warns in this case (ex: writing style={{width: '300'}}. Unitless number values like width: 300 are unchanged. (@pluma in #5140)
• Synthetic Events will now warn when setting and accessing properties (which will not get cleared appropriately), as well as warn on access after an event has been returned to the pool. (@kentcdodds in #5940 and @koba04 in #5947)
• Elements will now warn when attempting to read ref and key from the props. (@prometheansacrifice in #5744)
• React will now warn if you pass a different props object to super() in the constructor. (@prometheansacrifice in #5346)
• React will now warn if you call setState() inside getChildContext(). (@raineroviir in #6121)
• React DOM now attempts to warn for mistyped event handlers on DOM elements, such as onclick which should be onClick. (@ali in #5361)
• React DOM now warns about NaN values in style. (@jontewks in #5811)
• React DOM now warns if you specify both value and defaultValue for an input. (@mgmcdermott in #5823)
• React DOM now warns if an input switches between being controlled and uncontrolled. (@TheBlasfem in #5864)
• React DOM now warns if you specify onFocusIn or onFocusOut handlers as they are unnecessary in React. (@jontewks in #6296)
• React now prints a descriptive error message when you pass an invalid callback as the last argument to ReactDOM.render(), this.setState(), or this.forceUpdate(). (@conorhastings in #5193 and @gaearon in #6310)
• Add-Ons: TestUtils.Simulate() now prints a helpful message if you attempt to use it with shallow rendering. (@conorhastings in #5358)
• PropTypes: arrayOf() and objectOf() provide better error messages for invalid arguments. (@chicoxyzzy in #5390)

Notable bug fixes

• Fixed multiple small memory leaks. (@sophiebits in #4983 and @victor-homyakov in #6309)
• Input events are handled more reliably in IE 10 and IE 11; spurious events no longer fire when using a placeholder. (@jquense in #4051)
• The componentWillReceiveProps() lifecycle method is now consistently called when context changes. (@milesj in #5787)
• React.cloneElement() doesn’t append slash to an existing key when used inside React.Children.map(). (@ianobermiller in #5892)
• React DOM now supports the cite and profile HTML attributes. (@AprilArcus in #6094 and @saiichihashimoto in #6032)
• React DOM now supports cssFloat, gridRow and gridColumn CSS properties. (@stevenvachon in #6133 and @mnordick in #4779)
• React DOM now correctly handles borderImageOutset, borderImageWidth, borderImageSlice, floodOpacity, strokeDasharray, and strokeMiterlimit as unitless CSS properties. (@rofrischmann in #6210 and #6270)
• React DOM now supports the onAnimationStart, onAnimationEnd, onAnimationIteration, onTransitionEnd, and onInvalid events. Support for onLoad has been added to object elements. (@tomduncalf in #5187, @milesj in #6005, and @ara4n in #5781)
• React DOM now defaults to using DOM attributes instead of properties, which fixes a few edge case bugs. Additionally the nullification of values (ex: href={null}) now results in the forceful removal, no longer trying to set to the default value used by browsers in the absence of a value. (@syranide in #1510)
• React DOM does not mistakenly coerce children to strings for Web Components. (@jimfb in #5093)
• React DOM now correctly normalizes SVG <use> events. (@edmellum in #5720)
• React DOM does not throw if a <select> is unmounted while its onChange handler is executing. (@sambev in #6028)
• React DOM does not throw in Windows 8 apps. (@Andrew8xx8 in #6063)
• React DOM does not throw when asynchronously unmounting a child with a ref. (@yiminghe in #6095)
• React DOM no longer forces synchronous layout because of scroll position tracking. (@syranide in #2271)
• Object.is is used in a number of places to compare values, which leads to fewer false positives, especially involving NaN. In particular, this affects the shallowCompare add-on. (@chicoxyzzy in #6132)
• Add-Ons: ReactPerf no longer instruments adding or removing an event listener because they don’t really touch the DOM due to event delegation. (@antoaravinth in #5209)

Other improvements

• React now uses loose-envify instead of envify so it installs fewer transitive dependencies. (@qerub in #6303)
• Shallow renderer now exposes getMountedInstance(). (@glenjamin in #4918)
• Shallow renderer now returns the rendered output from render(). (@simonewebdesign in #5411)
• React no longer depends on ES5 shams for Object.create and Object.freeze in older environments. It still, however, requires ES5 shims in those environments. (@dgreensp in #4959)
• React DOM now allows data- attributes with names that start with numbers. (@nLight in #5216)
• React DOM adds a new suppressContentEditableWarning prop for components like Draft.js that intentionally manage contentEditable children with React. (@mxstbr in #6112)
• React improves the performance for createClass() on complex specs. (@sophiebits in #5550)