Merge pull request #683 from benax-se/docs-delete-usecallback-example

Remove useCallback example from weakMapMemoize page
reduxjs · Jan 13, 2024 · bcfc3cd · bcfc3cd
2 parents 21b0f4b + ee5223b
commit bcfc3cd
Show file tree

Hide file tree

Showing 3 changed files with 1 addition and 126 deletions.
diff --git a/docs/examples/weakMapMemoize/withUseCallback.tsx b/docs/examples/weakMapMemoize/withUseCallback.tsx
diff --git a/website/docs/api/weakMapMemoize.mdx b/website/docs/api/weakMapMemoize.mdx
@@ -255,91 +255,7 @@ const MyComponent = ({ category }) => {
 
 {/* END: weakMapMemoize/withUseMemo.tsx */}
 
-3. Using <ExternalLinks.UseCallback />.
-
-{/* START: weakMapMemoize/withUseCallback.tsx */}
-
-<Tabs
-  groupId='language'
-  defaultValue='tsx'
-  values={[
-    {label: 'TypeScript', value: 'tsx'},
-    {label: 'JavaScript', value: 'jsx'},
-  ]}>
-  <TabItem value='tsx'>
-
-```tsx title="weakMapMemoize/withUseCallback.tsx"
-import type { FC } from 'react'
-import { useCallback } from 'react'
-import { useSelector } from 'react-redux'
-import { createSelector } from 'reselect'
-import type { RootState } from './cacheSizeProblem'
-
-const selectItemsByCategory = createSelector(
-  [
-    (state: RootState) => state.items,
-    (state: RootState, category: string) => category
-  ],
-  (items, category) => items.filter(item => item.category === category)
-)
-
-interface Props {
-  category: string
-}
-
-const MyComponent: FC<Props> = ({ category }) => {
-  const selectItemsByCategoryMemoized = useCallback(selectItemsByCategory, [])
-
-  const itemsByCategory = useSelector((state: RootState) =>
-    selectItemsByCategoryMemoized(state, category)
-  )
-
-  return (
-    <div>
-      {itemsByCategory.map(item => (
-        <div key={item.id}>{item.name}</div>
-      ))}
-    </div>
-  )
-}
-```
-
-  </TabItem>
-  <TabItem value='jsx'>
-
-```jsx title="weakMapMemoize/withUseCallback.jsx"
-import { useCallback } from 'react'
-import { useSelector } from 'react-redux'
-import { createSelector } from 'reselect'
-
-const selectItemsByCategory = createSelector(
-  [state => state.items, (state, category) => category],
-  (items, category) => items.filter(item => item.category === category)
-)
-
-const MyComponent = ({ category }) => {
-  const selectItemsByCategoryMemoized = useCallback(selectItemsByCategory, [])
-
-  const itemsByCategory = useSelector(state =>
-    selectItemsByCategoryMemoized(state, category)
-  )
-
-  return (
-    <div>
-      {itemsByCategory.map(item => (
-        <div key={item.id}>{item.name}</div>
-      ))}
-    </div>
-  )
-}
-```
-
-  </TabItem>
-</Tabs>
-
-{/* END: weakMapMemoize/withUseCallback.tsx */}
-
-4. Use <ExternalLinks.ReReselect />:
+3. Use <ExternalLinks.ReReselect />:
 
 ```ts
 import { createCachedSelector } from 're-reselect'

diff --git a/website/src/components/ExternalLinks.tsx b/website/src/components/ExternalLinks.tsx
@@ -44,14 +44,6 @@ export const ExternalLinks = {
       <code>{text}</code>
     </Link>
   )),
-  UseCallback: memo(({ text = 'useCallback' }) => (
-    <Link
-      to="https://react.dev/reference/react/useCallback#usecallback"
-      title="useCallback"
-    >
-      <code>{text}</code>
-    </Link>
-  )),
   ReReselect: memo(({ text = 'Re-reselect' }) => (
     <Link to="https://github.com/toomuchdesign/re-reselect" title="re-reselect">
       {text}