Migrate to functional components - 1

[Inbal-Tish]

private components migration to functional component

[ethanshar]

@Inbal-Tish
Overall the refactor looks good, But I notice a performance degradation in this PR.

I see that the Basic Day component for example now render each time (all days are being rendered when switching between two days!)

I suggest using this hook to investigate the source of wasteful renders.

In general from a quick look, I see that we pass BasicDay the date prop which seem to be a new object reference each time.
Any reason why shouldn't we pass a day string? (and generate an object internally with date utils)

Also I notice that the Day component accepts a day prop of XDate type. Also here, I think we can use date string instead and internally create an XDate.

I believe that if we'll avoid passing date objects between components we'll see a huge improvement.

[ethanshar]

Avoid passing static inline object, you can define as a file const

[ethanshar]

Why not keeping the object as global file const? it's static

[Inbal-Tish]

this hook

Done and done. Good catch, great hook!

[ethanshar]

this hook

Done and done. Good catch, great hook!

@Inbal-Tish
I still see performance issues in the first example screen (Calendars)
It might be related to the example, but when I console the renders. The days are still re-render on every day change

[Inbal-Tish]

this hook

Done and done. Good catch, great hook!

@Inbal-Tish I still see performance issues in the first example screen (Calendars) It might be related to the example, but when I console the renders. The days are still re-render on everyday change

Which render do you console? If you're checking Day component then passing onPress is causing a render. I'm working on moving Calendar to functional as well so I can improve this as well. Do you think it's a regression?

[ethanshar]

Which render do you console? If you're checking Day component then passing onPress is causing a render. I'm working on moving Calendar to functional as well so I can improve this as well. Do you think it's a regression?

Im adding console to the day component.
I thought that we fixed that yesterday, didn't we?

[ethanshar]

Consider moving the check for undefined inside isToday

[Inbal-Tish]

Yes. I already do. fixing here

[Inbal-Tish]

Which render do you console? If you're checking Day component then passing onPress is causing a render. I'm working on moving Calendar to functional as well so I can improve this as well. Do you think it's a regression?

Im adding console to the day component. I thought that we fixed that yesterday, didn't we?

Yes. Fix was pushed