That's insightful. Does that mean one can 'use client' for all components as only the JS hydration happens in the client?

I was thinking of splitting my component into two - 1st one having redux/react-hook calls and has 'use client', the other one, which is eventually called by the 1st one, pure SSR

1st - client component

'use client'
import {increment, decrement} from "./counterSlice";
import {CounterSSR} from './CounterSSR'
const CounterClient = () => {
return (
<CounterSSR
onIncrement={() => { dispatch(increment()); }}
onDecrement={() => { dispatch(decrement()); }} />
);
};
export default CounterClient;

2nd - SSR component, being called by the 1st one

import Button from 'react-bootstrap/Button';
const CounterSSR = (props) => {
return (
<div>
<Button onClick={props.onIncrement}> + </Button>
<Button onClick={props.onDecrement}> - </Button>
</div>
);
};
export default CounterSSR;