Try without memo

1 year ago · a9e36d4a9c
parent 68178f7f31
commit a9e36d4a9c
7 changed files with 188 additions and 129 deletions
--- a/babel.config.js
+++ b/babel.config.js
@ -29,7 +29,19 @@ module.exports = function (api) {
  }

  return {
-    presets: ['babel-preset-expo'],
+    presets: [
+      'babel-preset-expo',
+      [
+        '@babel/preset-react',
+        {
+          importSource: '@welldone-software/why-did-you-render',
+          runtime: 'automatic',
+          development:
+            process.env.NODE_ENV === 'development' ||
+            process.env.BABEL_ENV === 'development'
+        }
+      ]
+    ],
    plugins
  }
 }
--- a/package.json
+++ b/package.json
@ -104,6 +104,7 @@
  "devDependencies": {
    "@babel/core": "7.18.2",
    "@babel/plugin-proposal-optional-chaining": "7.17.12",
+    "@babel/preset-react": "^7.17.12",
    "@babel/preset-typescript": "7.17.12",
    "@expo/config": "6.0.24",
    "@types/lodash": "4.14.182",
--- a/src/api/tooot.ts
+++ b/src/api/tooot.ts
@ -19,7 +19,7 @@ export type Params = {

 export const TOOOT_API_DOMAIN = mapEnvironment({
  release: 'api.tooot.app',
-  candidate: 'api.tooot.app',
+  candidate: 'api-candidate.tooot.app',
  development: 'api-development.tooot.app'
 })

--- a/src/components/Timeline/Default.tsx
+++ b/src/components/Timeline/Default.tsx
@ -14,7 +14,7 @@ import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { getInstanceAccount } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import { isEqual, uniqBy } from 'lodash'
+import { uniqBy } from 'lodash'
 import React, { useCallback } from 'react'
 import { Pressable, View } from 'react-native'
 import { useSelector } from 'react-redux'
@ -34,145 +34,136 @@ export interface Props {
 }

 // When the poll is long
-const TimelineDefault = React.memo(
-  ({
-    item,
-    queryKey,
-    rootQueryKey,
-    origin,
-    highlighted = false,
-    disableDetails = false,
-    disableOnPress = false
-  }: Props) => {
-    const { colors } = useTheme()
-    const instanceAccount = useSelector(getInstanceAccount, () => true)
-    const navigation =
-      useNavigation<StackNavigationProp<TabLocalStackParamList>>()
+const TimelineDefault: React.FC<Props> = ({
+  item,
+  queryKey,
+  rootQueryKey,
+  origin,
+  highlighted = false,
+  disableDetails = false,
+  disableOnPress = false
+}) => {
+  const { colors } = useTheme()
+  const instanceAccount = useSelector(getInstanceAccount, () => true)
+  const navigation =
+    useNavigation<StackNavigationProp<TabLocalStackParamList>>()

-    const actualStatus = item.reblog ? item.reblog : item
+  const actualStatus = item.reblog ? item.reblog : item

-    const ownAccount = actualStatus.account?.id === instanceAccount?.id
+  const ownAccount = actualStatus.account?.id === instanceAccount?.id

-    if (
-      !highlighted &&
-      queryKey &&
-      shouldFilter({ status: actualStatus, queryKey })
-    ) {
-      return <TimelineFiltered />
-    }
+  if (
+    !highlighted &&
+    queryKey &&
+    shouldFilter({ status: actualStatus, queryKey })
+  ) {
+    return <TimelineFiltered />
+  }

-    const onPress = useCallback(() => {
-      analytics('timeline_default_press', {
-        page: queryKey ? queryKey[1].page : origin
+  const onPress = useCallback(() => {
+    analytics('timeline_default_press', {
+      page: queryKey ? queryKey[1].page : origin
+    })
+    !disableOnPress &&
+      !highlighted &&
+      navigation.push('Tab-Shared-Toot', {
+        toot: actualStatus,
+        rootQueryKey: queryKey
      })
-      !disableOnPress &&
-        !highlighted &&
-        navigation.push('Tab-Shared-Toot', {
-          toot: actualStatus,
-          rootQueryKey: queryKey
-        })
-    }, [])
+  }, [])
+
+  return (
+    <Pressable
+      accessible={highlighted ? false : true}
+      style={{
+        padding: StyleConstants.Spacing.Global.PagePadding,
+        backgroundColor: colors.backgroundDefault,
+        paddingBottom:
+          disableDetails && disableOnPress
+            ? StyleConstants.Spacing.Global.PagePadding
+            : 0
+      }}
+      onPress={onPress}
+    >
+      {item.reblog ? (
+        <TimelineActioned action='reblog' account={item.account} />
+      ) : item._pinned ? (
+        <TimelineActioned action='pinned' account={item.account} />
+      ) : null}

-    return (
-      <Pressable
-        accessible={highlighted ? false : true}
+      <View style={{ flex: 1, width: '100%', flexDirection: 'row' }}>
+        <TimelineAvatar
+          queryKey={disableOnPress ? undefined : queryKey}
+          account={actualStatus.account}
+          highlighted={highlighted}
+        />
+        <TimelineHeaderDefault
+          queryKey={disableOnPress ? undefined : queryKey}
+          rootQueryKey={disableOnPress ? undefined : rootQueryKey}
+          status={actualStatus}
+          highlighted={highlighted}
+        />
+      </View>
+
+      <View
        style={{
-          padding: StyleConstants.Spacing.Global.PagePadding,
-          backgroundColor: colors.backgroundDefault,
-          paddingBottom:
-            disableDetails && disableOnPress
-              ? StyleConstants.Spacing.Global.PagePadding
-              : 0
+          paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
+          paddingLeft: highlighted
+            ? 0
+            : StyleConstants.Avatar.M + StyleConstants.Spacing.S
        }}
-        onPress={onPress}
      >
-        {item.reblog ? (
-          <TimelineActioned action='reblog' account={item.account} />
-        ) : item._pinned ? (
-          <TimelineActioned action='pinned' account={item.account} />
-        ) : null}
-
-        <View style={{ flex: 1, width: '100%', flexDirection: 'row' }}>
-          <TimelineAvatar
-            queryKey={disableOnPress ? undefined : queryKey}
-            account={actualStatus.account}
-            highlighted={highlighted}
-          />
-          <TimelineHeaderDefault
-            queryKey={disableOnPress ? undefined : queryKey}
-            rootQueryKey={disableOnPress ? undefined : rootQueryKey}
+        {typeof actualStatus.content === 'string' &&
+        actualStatus.content.length > 0 ? (
+          <TimelineContent
            status={actualStatus}
            highlighted={highlighted}
+            disableDetails={disableDetails}
          />
-        </View>
-
-        <View
-          style={{
-            paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
-            paddingLeft: highlighted
-              ? 0
-              : StyleConstants.Avatar.M + StyleConstants.Spacing.S
-          }}
-        >
-          {typeof actualStatus.content === 'string' &&
-          actualStatus.content.length > 0 ? (
-            <TimelineContent
-              status={actualStatus}
-              highlighted={highlighted}
-              disableDetails={disableDetails}
-            />
-          ) : null}
-          {queryKey && actualStatus.poll ? (
-            <TimelinePoll
-              queryKey={queryKey}
-              rootQueryKey={rootQueryKey}
-              statusId={actualStatus.id}
-              poll={actualStatus.poll}
-              reblog={item.reblog ? true : false}
-              sameAccount={ownAccount}
-            />
-          ) : null}
-          {!disableDetails &&
-          Array.isArray(actualStatus.media_attachments) &&
-          actualStatus.media_attachments.length ? (
-            <TimelineAttachment status={actualStatus} />
-          ) : null}
-          {!disableDetails && actualStatus.card ? (
-            <TimelineCard card={actualStatus.card} />
-          ) : null}
-          {!disableDetails ? (
-            <TimelineFullConversation
-              queryKey={queryKey}
-              status={actualStatus}
-            />
-          ) : null}
-          <TimelineTranslate status={actualStatus} highlighted={highlighted} />
-          <TimelineFeedback status={actualStatus} highlighted={highlighted} />
-        </View>
-
-        {queryKey && !disableDetails ? (
-          <TimelineActions
+        ) : null}
+        {queryKey && actualStatus.poll ? (
+          <TimelinePoll
            queryKey={queryKey}
            rootQueryKey={rootQueryKey}
-            highlighted={highlighted}
-            status={actualStatus}
-            ownAccount={ownAccount}
-            accts={uniqBy(
-              (
-                [actualStatus.account] as Mastodon.Account[] &
-                  Mastodon.Mention[]
-              )
-                .concat(actualStatus.mentions)
-                .filter(d => d?.id !== instanceAccount?.id),
-              d => d?.id
-            ).map(d => d?.acct)}
+            statusId={actualStatus.id}
+            poll={actualStatus.poll}
            reblog={item.reblog ? true : false}
+            sameAccount={ownAccount}
          />
        ) : null}
-      </Pressable>
-    )
-  },
-  (prev, next) => isEqual(prev.item, next.item)
-)
+        {!disableDetails &&
+        Array.isArray(actualStatus.media_attachments) &&
+        actualStatus.media_attachments.length ? (
+          <TimelineAttachment status={actualStatus} />
+        ) : null}
+        {!disableDetails && actualStatus.card ? (
+          <TimelineCard card={actualStatus.card} />
+        ) : null}
+        {!disableDetails ? (
+          <TimelineFullConversation queryKey={queryKey} status={actualStatus} />
+        ) : null}
+        <TimelineTranslate status={actualStatus} highlighted={highlighted} />
+        <TimelineFeedback status={actualStatus} highlighted={highlighted} />
+      </View>
+
+      {queryKey && !disableDetails ? (
+        <TimelineActions
+          queryKey={queryKey}
+          rootQueryKey={rootQueryKey}
+          highlighted={highlighted}
+          status={actualStatus}
+          ownAccount={ownAccount}
+          accts={uniqBy(
+            ([actualStatus.account] as Mastodon.Account[] & Mastodon.Mention[])
+              .concat(actualStatus.mentions)
+              .filter(d => d?.id !== instanceAccount?.id),
+            d => d?.id
+          ).map(d => d?.acct)}
+          reblog={item.reblog ? true : false}
+        />
+      ) : null}
+    </Pressable>
+  )
+}

 export default TimelineDefault
--- a/src/startup/dev.ts
+++ b/src/startup/dev.ts
@ -1,3 +1,5 @@
+/// <reference types="@welldone-software/why-did-you-render" />
+
 import React from 'react'
 import log from './log'

--- a/src/utils/queryHooks/timeline.ts
+++ b/src/utils/queryHooks/timeline.ts
@ -440,8 +440,8 @@ const useTimelineMutation = ({
    ...(onMutate && {
      onMutate: params => {
        queryClient.cancelQueries(params.queryKey)
-        let oldData
-        params.queryKey && (oldData = queryClient.getQueryData(params.queryKey))
+        const oldData =
+          params.queryKey && queryClient.getQueryData(params.queryKey)

        haptics('Light')
        switch (params.type) {
--- a/yarn.lock
+++ b/yarn.lock
@ -693,6 +693,13 @@
  dependencies:
    "@babel/helper-plugin-utils" "^7.16.7"

+"@babel/plugin-syntax-jsx@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.17.12.tgz#834035b45061983a491f60096f61a2e7c5674a47"
+  integrity sha512-spyY3E3AURfxh/RHtjx5j6hs8am5NbUBGfcZ2vB3uShSpZdQyXSf5rR5Mk76vbtlAZOelyVQ71Fg0x9SG4fsog==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+
 "@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
  version "7.10.4"
  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
@ -973,13 +980,20 @@
  dependencies:
    "@babel/helper-plugin-utils" "^7.16.7"

-"@babel/plugin-transform-react-display-name@^7.0.0":
+"@babel/plugin-transform-react-display-name@^7.0.0", "@babel/plugin-transform-react-display-name@^7.16.7":
  version "7.16.7"
  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.16.7.tgz#7b6d40d232f4c0f550ea348593db3b21e2404340"
  integrity sha512-qgIg8BcZgd0G/Cz916D5+9kqX0c7nPZyXaP8R2tLNN5tkyIZdG5fEwBrxwplzSnjC1jvQmyMNVwUCZPcbGY7Pg==
  dependencies:
    "@babel/helper-plugin-utils" "^7.16.7"

+"@babel/plugin-transform-react-jsx-development@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.16.7.tgz#43a00724a3ed2557ed3f276a01a929e6686ac7b8"
+  integrity sha512-RMvQWvpla+xy6MlBpPlrKZCMRs2AGiHOGHY3xRwl0pEeim348dDyxeH4xBsMPbIMhujeq7ihE702eM2Ew0Wo+A==
+  dependencies:
+    "@babel/plugin-transform-react-jsx" "^7.16.7"
+
 "@babel/plugin-transform-react-jsx-self@^7.0.0":
  version "7.16.7"
  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.16.7.tgz#f432ad0cba14c4a1faf44f0076c69e42a4d4479e"
@ -1005,6 +1019,25 @@
    "@babel/plugin-syntax-jsx" "^7.16.7"
    "@babel/types" "^7.17.0"

+"@babel/plugin-transform-react-jsx@^7.16.7", "@babel/plugin-transform-react-jsx@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.17.12.tgz#2aa20022709cd6a3f40b45d60603d5f269586dba"
+  integrity sha512-Lcaw8bxd1DKht3thfD4A12dqo1X16he1Lm8rIv8sTwjAYNInRS1qHa9aJoqvzpscItXvftKDCfaEQzwoVyXpEQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.7"
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/plugin-syntax-jsx" "^7.17.12"
+    "@babel/types" "^7.17.12"
+
+"@babel/plugin-transform-react-pure-annotations@^7.16.7":
+  version "7.18.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.18.0.tgz#ef82c8e310913f3522462c9ac967d395092f1954"
+  integrity sha512-6+0IK6ouvqDn9bmEG7mEyF/pwlJXVj5lwydybpyyH3D0A7Hftk+NCTdYjnLNZksn261xaOV5ksmp20pQEmc2RQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.17.12"
+
 "@babel/plugin-transform-regenerator@^7.0.0", "@babel/plugin-transform-regenerator@^7.16.7":
  version "7.16.7"
  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.16.7.tgz#9e7576dc476cb89ccc5096fff7af659243b4adeb"
@ -1200,6 +1233,18 @@
    "@babel/types" "^7.4.4"
    esutils "^2.0.2"

+"@babel/preset-react@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.17.12.tgz#62adbd2d1870c0de3893095757ed5b00b492ab3d"
+  integrity sha512-h5U+rwreXtZaRBEQhW1hOJLMq8XNJBQ/9oymXiCXTuT/0uOwpbT0gUt+sXeOqoXBgNuUKI7TaObVwoEyWkpFgA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-validator-option" "^7.16.7"
+    "@babel/plugin-transform-react-display-name" "^7.16.7"
+    "@babel/plugin-transform-react-jsx" "^7.17.12"
+    "@babel/plugin-transform-react-jsx-development" "^7.16.7"
+    "@babel/plugin-transform-react-pure-annotations" "^7.16.7"
+
 "@babel/preset-typescript@7.17.12":
  version "7.17.12"
  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.17.12.tgz#40269e0a0084d56fc5731b6c40febe1c9a4a3e8c"
@ -1332,6 +1377,14 @@
    "@babel/helper-validator-identifier" "^7.16.7"
    to-fast-properties "^2.0.0"

+"@babel/types@^7.17.12":
+  version "7.18.4"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.4.tgz#27eae9b9fd18e9dccc3f9d6ad051336f307be354"
+  integrity sha512-ThN1mBcMq5pG/Vm2IcBmPPfyPXbd8S02rS+OBIDENdufvqC7Z/jHPCv9IcP01277aKtDI8g/2XysBN4hA8niiw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    to-fast-properties "^2.0.0"
+
 "@babel/types@^7.18.0", "@babel/types@^7.18.2":
  version "7.18.2"
  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.2.tgz#191abfed79ebe6f4242f643a9a5cbaa36b10b091"