Page MenuHomePhabricator

[native] Convert `ColorSelectorModal` to a functional component
ClosedPublic

Authored by abosh on Aug 22 2022, 1:11 PM.
Tags
None
Referenced Files
Unknown Object (File)
Tue, Dec 24, 9:17 AM
Unknown Object (File)
Thu, Dec 19, 1:20 PM
Unknown Object (File)
Sun, Dec 15, 10:40 PM
Unknown Object (File)
Sat, Dec 14, 1:42 PM
Unknown Object (File)
Fri, Dec 6, 4:48 PM
Unknown Object (File)
Thu, Nov 28, 11:13 PM
Unknown Object (File)
Nov 25 2024, 6:06 AM
Unknown Object (File)
Nov 22 2024, 8:23 AM
Subscribers

Details

Summary

Related Linear issue here. Had this in my git stash from last night doing some quick and easy Backlog work, putting up the diff now.

Test Plan

Tested the ColorSelectorModal before and after and it remained the same and the ColorSelector worked as expected.

Diff Detail

Repository
rCOMM Comm
Branch
colorselectormodal (branched from master)
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

native/chat/settings/color-selector-modal.react.js
100 ↗(On Diff #15836)

Noticed that this could be memoized (see lines 93-98).

tomek requested changes to this revision.Aug 25 2022, 2:34 AM
tomek added inline comments.
native/chat/settings/color-selector-modal.react.js
54 ↗(On Diff #15836)

Most of the functions should be wrapped in useCallback so that they don't change on each render. This one is even simpler, as we can just assign the correct value to it.

58 ↗(On Diff #15836)

In functional component it might be more convenient to destructure props. It's not necessary, but you can consider it.

85–88 ↗(On Diff #15836)

Have you tested this code thoroughly? useMemo takes a function as a parameter and stores its return value - in this case undefined because we're not returning explicitly. I bet it wasn't the intention.

This revision now requires changes to proceed.Aug 25 2022, 2:34 AM

Address @tomek's feedback. Added useCallback to memoize functions and destructured props.

tomek requested changes to this revision.Aug 25 2022, 10:38 AM
tomek added inline comments.
native/chat/settings/color-selector-modal.react.js
81 ↗(On Diff #15985)

Please make this dependency list as specific as possible. Depending on props would mean that every time any prop changes we recompute the value.

102–104 ↗(On Diff #15985)

When the only purpose of a lambda is to return a value, you can use a shorthand syntax

This revision now requires changes to proceed.Aug 25 2022, 10:38 AM

Destructure changeThreadSettings so editColor doesn't recompute each time props changes. I think the reason I was confused before is because we also import changeThreadSettings from lib/actions/thread-actions (line 9) but it is also passed in as a prop with the same name.

Also remove { } and return in one line return statement.

This revision is now accepted and ready to land.Aug 25 2022, 11:05 AM
This revision was landed with ongoing or failed builds.Aug 25 2022, 11:06 AM
This revision was automatically updated to reflect the committed changes.
abosh marked an inline comment as done and an inline comment as not done.