diff --git a/lib/shared/ancestor-threads.js b/lib/shared/ancestor-threads.js index 61328c7e1..bfcd6dacd 100644 --- a/lib/shared/ancestor-threads.js +++ b/lib/shared/ancestor-threads.js @@ -1,29 +1,33 @@ // @flow +import * as React from 'react'; + import genesis from '../facts/genesis.js'; import { threadInfoSelector, ancestorThreadInfos, } from '../selectors/thread-selectors.js'; import { threadIsPending } from '../shared/thread-utils.js'; import { type ThreadInfo } from '../types/thread-types.js'; import { useSelector } from '../utils/redux-utils.js'; function useAncestorThreads( threadInfo: ThreadInfo, ): $ReadOnlyArray { - return useSelector(state => { - if (!threadIsPending(threadInfo.id)) { - const ancestorThreads = ancestorThreadInfos(threadInfo.id)(state); - if (ancestorThreads.length > 1) { - return ancestorThreads.slice(0, -1); - } + const ancestorThreads = useSelector(ancestorThreadInfos(threadInfo.id)); - return ancestorThreads; + const genesisThreadInfo = useSelector( + state => threadInfoSelector(state)[genesis.id], + ); + + return React.useMemo(() => { + if (!threadIsPending(threadInfo.id)) { + return ancestorThreads.length > 1 + ? ancestorThreads.slice(0, -1) + : ancestorThreads; } - const genesisThreadInfo = threadInfoSelector(state)[genesis.id]; return genesisThreadInfo ? [genesisThreadInfo] : []; - }); + }, [ancestorThreads, genesisThreadInfo, threadInfo.id]); } export { useAncestorThreads };