| b69ab31 | | | 1 | /** |
| b69ab31 | | | 2 | * Copyright (c) Meta Platforms, Inc. and affiliates. |
| b69ab31 | | | 3 | * |
| b69ab31 | | | 4 | * This source code is licensed under the MIT license found in the |
| b69ab31 | | | 5 | * LICENSE file in the root directory of this source tree. |
| b69ab31 | | | 6 | */ |
| b69ab31 | | | 7 | |
| b69ab31 | | | 8 | const containerMethods = new Set(['get', 'has']); |
| b69ab31 | | | 9 | |
| b69ab31 | | | 10 | /** |
| b69ab31 | | | 11 | * Example: |
| b69ab31 | | | 12 | * |
| b69ab31 | | | 13 | * function MaybeHighlight(props: {id: string}) { |
| b69ab31 | | | 14 | * const set = useAtomValue(selectedSet); |
| b69ab31 | | | 15 | * const selected = set.has(props.id) |
| b69ab31 | | | 16 | * return selected ? <Highlight /> : null; |
| b69ab31 | | | 17 | * } |
| b69ab31 | | | 18 | * |
| b69ab31 | | | 19 | * will trigger re-render of all MaybeHigh once the atom has any small |
| b69ab31 | | | 20 | * changes. To only re-render changed items, use `atomFamilyWeak`: |
| b69ab31 | | | 21 | * |
| b69ab31 | | | 22 | * const selectedById = atomFamilyWeak((id: string) => { |
| b69ab31 | | | 23 | * return atom(get => get(selectedsSet).has(id)); |
| b69ab31 | | | 24 | * }); |
| b69ab31 | | | 25 | * function MaybeHighlight(props: {id: string}) { |
| b69ab31 | | | 26 | * const selected = useAtomValue(selectedById(props.id)); |
| b69ab31 | | | 27 | * ... |
| b69ab31 | | | 28 | * } |
| b69ab31 | | | 29 | * |
| b69ab31 | | | 30 | * Alternatively, calculate a memo-ed atom on demand: |
| b69ab31 | | | 31 | * |
| b69ab31 | | | 32 | * function MaybeHighlight({id}: {id: string}) { |
| b69ab31 | | | 33 | * const selectedAtom = useMemo(() => atom(get => get(selectedsSet).has(id)), [id]); |
| b69ab31 | | | 34 | * const selected = useAtomValue(selectedAtom); |
| b69ab31 | | | 35 | * ... |
| b69ab31 | | | 36 | * } |
| b69ab31 | | | 37 | * |
| b69ab31 | | | 38 | * The `atomFamilyWeak` might keep some extra states alive to satisfy other |
| b69ab31 | | | 39 | * use-cases. The memo-ed atom approach has no memory leak and might be |
| b69ab31 | | | 40 | * preferred if there are only 1 component that needs this derived atom state. |
| b69ab31 | | | 41 | */ |
| b69ab31 | | | 42 | module.exports = { |
| b69ab31 | | | 43 | meta: { |
| b69ab31 | | | 44 | type: 'problem', |
| b69ab31 | | | 45 | docs: { |
| b69ab31 | | | 46 | description: 'Suggest alternatives for container-get-key patterns to avoid re-render.', |
| b69ab31 | | | 47 | }, |
| b69ab31 | | | 48 | }, |
| b69ab31 | | | 49 | create(context) { |
| b69ab31 | | | 50 | return { |
| b69ab31 | | | 51 | VariableDeclarator(node) { |
| b69ab31 | | | 52 | if (node.init?.type === 'CallExpression' && node.init.callee.name === 'useAtomValue') { |
| b69ab31 | | | 53 | analyzeUseRecoilValue(node, context); |
| b69ab31 | | | 54 | } |
| b69ab31 | | | 55 | }, |
| b69ab31 | | | 56 | }; |
| b69ab31 | | | 57 | }, |
| b69ab31 | | | 58 | }; |
| b69ab31 | | | 59 | |
| b69ab31 | | | 60 | function analyzeUseRecoilValue(node, context) { |
| b69ab31 | | | 61 | const varName = node.id.name; |
| b69ab31 | | | 62 | // Analyze references to this variable. |
| b69ab31 | | | 63 | const sourceCode = context.sourceCode ?? context.getSourceCode(); |
| b69ab31 | | | 64 | const scope = sourceCode.getScope?.(node) ?? context.getScope(); |
| b69ab31 | | | 65 | // The container method being used: "get" or "has". |
| b69ab31 | | | 66 | let method = null; |
| b69ab31 | | | 67 | // Find references of this variable. |
| b69ab31 | | | 68 | const references = scope.variables.find(({name}) => name === varName)?.references ?? []; |
| b69ab31 | | | 69 | // Check the references. The first one is the declaration and should be skipped. |
| b69ab31 | | | 70 | for (const reference of references.slice(1)) { |
| b69ab31 | | | 71 | // Inside a loop for potentially legit usecase. Allow. |
| b69ab31 | | | 72 | const innerScope = reference.from; |
| b69ab31 | | | 73 | if (innerScope?.block.type === 'ArrowFunctionExpression') { |
| b69ab31 | | | 74 | return; |
| b69ab31 | | | 75 | } |
| b69ab31 | | | 76 | let nextNode = sourceCode.getTokenAfter(reference.identifier); |
| b69ab31 | | | 77 | // Container methods like ".get" or ".has"? |
| b69ab31 | | | 78 | let currentMethod = null; |
| b69ab31 | | | 79 | if (nextNode?.type === 'Punctuator' && (nextNode.value === '.' || nextNode.value === '?.')) { |
| b69ab31 | | | 80 | nextNode = sourceCode.getTokenAfter(nextNode); |
| b69ab31 | | | 81 | if (nextNode?.type === 'Identifier' && containerMethods.has(nextNode.value)) { |
| b69ab31 | | | 82 | currentMethod = method = nextNode.value; |
| b69ab31 | | | 83 | } |
| b69ab31 | | | 84 | } |
| b69ab31 | | | 85 | // Called other methods, or have other use-cases. Allow. |
| b69ab31 | | | 86 | if (currentMethod === null) { |
| b69ab31 | | | 87 | return; |
| b69ab31 | | | 88 | } |
| b69ab31 | | | 89 | } |
| b69ab31 | | | 90 | if (method !== null) { |
| b69ab31 | | | 91 | context.report({ |
| b69ab31 | | | 92 | node, |
| b69ab31 | | | 93 | message: |
| b69ab31 | | | 94 | 'Atom value `{{ varName }}` seems to be only used for `{{ method }}`. Consider moving `{{ method }}` to a `atomFamilyWeak` or use `{{ useMethod }}` to avoid re-render.', |
| b69ab31 | | | 95 | data: { |
| b69ab31 | | | 96 | varName, |
| b69ab31 | | | 97 | method, |
| b69ab31 | | | 98 | useMethod: method === 'get' ? 'useAtomGet' : 'useAtomHas', |
| b69ab31 | | | 99 | }, |
| b69ab31 | | | 100 | }); |
| b69ab31 | | | 101 | } |
| b69ab31 | | | 102 | } |