diff --git a/docs/rules/jsx-no-bind.md b/docs/rules/jsx-no-bind.md index e44321e79f..12128ee5c6 100644 --- a/docs/rules/jsx-no-bind.md +++ b/docs/rules/jsx-no-bind.md @@ -37,7 +37,7 @@ When `true` the following are **not** considered warnings: ```jsx
console.log("Hello!")} /> - + ``` ### `ignoreRefs` @@ -151,6 +151,35 @@ class Foo extends React.Component { A more sophisticated approach would be to use something like an [autobind ES7 decorator](https://www.npmjs.com/package/core-decorators#autobind) or [property initializers](https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding). +### React Hooks + +Functional components are often used alongside hooks, and the most trivial case would occur if your callback is completely independent from your state. In this case, the solution is as simple as moving the callback out of your component: + +```jsx +const onClick = () => { + console.log("Independent callback"); +}; +const Button = () => { + return ( + + ); +}; +``` + +Otherwise, the idiomatic way to avoid redefining callbacks on every render would be to memoize them using the [`useCallback`](https://reactjs.org/docs/hooks-reference.html#usecallback) hook: + +```jsx +const Button = () => { + const [text, setText] = useState("Before click"); + const onClick = useCallback(() => { + setText("After click"); + }, [setText]); // Array of dependencies for which the memoization should update + return ( + + ); +}; +``` + ## When Not To Use It If you do not use JSX or do not want to enforce that `bind` or arrow functions are not used in props, then you can disable this rule.