diff --git a/lib/shared/ancestor-threads.js b/lib/shared/ancestor-threads.js --- a/lib/shared/ancestor-threads.js +++ b/lib/shared/ancestor-threads.js @@ -1,5 +1,7 @@ // @flow +import * as React from 'react'; + import genesis from '../facts/genesis.js'; import { threadInfoSelector, @@ -12,18 +14,20 @@ 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 };