Many fat arrows in a row in Javascript? [duplicate] - ecmascript-6

Question

This question already has answers here:
What do multiple arrow functions mean in JavaScript?
(7 answers)
Closed 2 years ago.
I came across this code in the documentation for an NPM lib I was considering.
Coud someone attempt to explain to me what at least the first line is doing? It appears that the 3 => bits imply that these functions all return functions.
I consider myself (perhaps wrongly) passably good at javascript. The way thisis put together seems overly convoluted, at least clear obvious to me. I suppose if I could a bit more if tried hard enough, but something about this just feels overly confusing, so I moved on to another library.
The first line, and order of assignment, where functions start and stop is the least for me.
const withTimer = timerProps => WrappedComponent => wrappedComponentProps => (
<Timer {...timerProps}>
{timerRenderProps =>
<WrappedComponent {...wrappedComponentProps} timer={timerRenderProps} />}
</Timer>
);
class TimerWrapper extends React.Component {
shouldComponentUpdate() {
return false;
}
render() {
return (
<div>
<div>Simple text</div>
<Timer.Consumer>
{() => this.props.timer.getTime()}
</Timer.Consumer>
</div>
);
}
}
const TimerHOC = withTimer({
initialTime: 5000,
})(TimerWrapper);
<TimerHOC />

Answer 1

It is essentially this
function withTimer(timerProps) {
function withWrappedComponent(WrappedComponent) {
function withWrappedComponentProps(wrappedComponentProps) {
return (
<Timer {...timerProps}>
{(timerRenderProps) => (
<WrappedComponent {...wrappedComponentProps} timer={timerRenderProps} />
)}
</Timer>
);
}
return withWrappedComponentProps;
}
return withWrappedComponent;
}
If that helps
Alternatively as a sort of intermediary between both forms, it is like this
function withTimer(timerProps) {
return function (WrappedComponent) {
return function (wrappedComponentProps) {
return (
<Timer {...timerProps}>
{(timerRenderProps) => (
<WrappedComponent {...wrappedComponentProps} timer={timerRenderProps} />
)}
</Timer>
);
};
};
}