IssueRaiser

[eslint-plugin-react-hooks] allow configuring custom hooks as "static"

<!-- Note: if the issue is about documentation or the website, please file it at: https://github.com/reactjs/reactjs.org/issues/new --> **Do you want to request a *feature* or report a *bug*?** Feature/enhancement **What is the current behavior?** Currently the eslint plugin is unable to understand when the **return value** of a custom hook is static. Example: ```jsx import React from 'react' function useToggle(init = false) { const [state, setState] = React.useState(init) const toggleState = React.useCallback(() => { setState(v => !v) }, []) return [state, toggleState] } function MyComponent({someProp}) { const [enabled, toggleEnabled] = useToggle() const handler = React.useCallback(() => { toggleEnabled() doSomethingWithTheProp(someProp) }, [someProp]) // exhaustive-deps warning for toggleEnabled return <button onClick={handler}>Do something</button> } ``` **What is the expected behavior?** I would like to configure `eslint-plugin-react-hooks` to tell it that `toggleEnabled` is static and doesn't need to be included in a dependency array. This isn't a huge deal but more of an ergonomic papercut that discourages writing/using custom hooks. As for how/where to configure it, I would be happy to add something like this to my .eslintrc: ```js { "staticHooks": { "useToggle": [false, true], // first return value is not stable, second is "useForm": true, // entire return value is stable } } ``` Then the plugin could

Posted by grncdr on Sep 24, 2019, 11:45 AM

Tags

Related issues

Raise real-world problems, find people facing the same issue, and discuss solutions.3,500 issues0 comments

github (Software)

[eslint-plugin-react-hooks] allow configuring custom hooks as "static"

grncdrSep 24, 2019, 11:45 AM

<!-- Note: if the issue is about documentation or the website, please file it at: https://github.com/reactjs/reactjs.org/issues/new --> **Do you want to request a *feature* or report a *bug*?** Feature/enhancement **What is the current behavior?** Currently the eslint plugin is unable to understand when the **return value** of a custom hook is static. Example: ```jsx import React from 'react' function useToggle(init = false) { const [state, setState] = React.useState(init) const toggleState = React.useCallback(() => { setState(v => !v) }, []) return [state, toggleState] } function MyComponent({someProp}) { const [enabled, toggleEnabled] = useToggle() const handler = React.useCallback(() => { toggleEnabled() doSomethingWithTheProp(someProp) }, [someProp]) // exhaustive-deps warning for toggleEnabled return <button onClick={handler}>Do something</button> } ``` **What is the expected behavior?** I would like to configure `eslint-plugin-react-hooks` to tell it that `toggleEnabled` is static and doesn't need to be included in a dependency array. This isn't a huge deal but more of an ergonomic papercut that discourages writing/using custom hooks. As for how/where to configure it, I would be happy to add something like this to my .eslintrc: ```js { "staticHooks": { "useToggle": [false, true], // first return value is not stable, second is "useForm": true, // entire return value is stable } } ``` Then the plugin could

Comments (0)

No comments yet. Start the discussion.

Comment on this issue