in packages-ext/recoil-devtools/src/pages/Popup/Items/DiffItem.js [44:83]
function DiffItem({
name,
startCollapsed = false,
isRoot = false,
}: Props): React.Node {
const connection = nullthrows(useContext(ConnectionContext));
const [txID] = useSelectedTransaction();
const {tree, dependencies} = connection;
const {value, previous} = useMemo(
() => ({
value: tree.get(name, txID),
previous: tree.get(name, txID - 1),
}),
[tree, txID, name],
);
return (
<CollapsibleItem
key={name}
isRoot={isRoot}
label={
<>
<ItemLabel
name={name}
node={connection.getNode(name)}
isRoot={isRoot}
/>
<ItemDescription content={value} previous={previous} />
</>
}
startCollapsed={startCollapsed}>
<div style={styles.valuesHolder}>
<JsonDiff left={formatForDiff(previous)} right={formatForDiff(value)} />
</div>
<ItemMoreItems content={value} />
<ItemDependencies name={name} />
</CollapsibleItem>
);
}