I totaly agree with you. We need full decoupling between components. They have to be seen as pure functions, taking parameters and returning view modifications (and new values)
const ProgressMeter = ({ className, percentage }) => {
const meterStyle = {
width: `${Math.round(Math.min(Math.max(percentage, 0), 1) * 100)}%`,
};
return (
<div className={cx('root', className)}>
<div className={cx('meter')} style={meterStyle}/>
</div>
);
};