reactjseslintreact-dnd

eslint plugin for react-dnd

I am building a solution with react-dnd and discovered I was missing dependencies to the hooks.

const Component = (props) => {
  const [, drop] = useDrop(() => ({
    drop: () => {
      dispatch(drop({ itemId: props.id }))
    }
  }), [props.id]); // <-- I was missing this!
  ... 
}

For native react-hooks useEffect, etc., there are eslint plugins detecting this, but I received no warnings for this.

Do such rules exist for react-dnd

Solution

  • No but you can extend the react-hooks/exhaustive-deps to include react-dnd hooks

    From https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md#advanced-configuration

    You can do

    {
  rules: {
    // ...
    "react-hooks/exhaustive-deps": ["error", {
      additionalHooks: "(useDrag|useDrop)"
    }]
  }
}