What has kept me sane

[Mike Austin]

Transform data at the source so you have one source of truth and don't repeat yourself. I have types for my GraphQL queries, but the types I use mostly are the transformed data types.

type Item = ReturnType<typeof useSelectItemsQuery>["items"][number];

Use JSONB to store things like "number of likes" instead of having to create and manage another table. I also used this for Checklist data and will likely convert my item bookmarks to JSONB.

Pass props explicitly so that you can see what is getting passed, and so that components don't get unexpected props. Some components like BacklogItem have lots of props, but I'd rather see them explicitly than try to remember if props are being piped correctly.

Use a high level UI framework. I have my own with View, Text, List etc. which has flexbox props and other niceties. Things such as <View horizontal align="middle justify"> and <Text light caps fontSize="12px"> so I don't need to remember alignItems / justifyContent and space-between, etc.

Create components from other components. Someone obvious, but things like <TagChip> which adds a little logic to <Tag> about "tags" such as mapping images and default colors. Some of these components are only a few lines of code, but make where they are used only a single line.

Higher order components help make the call site one line or a few lines. Repeating 3 lines 5 times vs just 5 lines makes a huge difference in readability.

const SelectField = Form.Field.withComponent(Select);

<Form ...>

  <SelectField _key="typeId" label="Type" options={itemTypeFilterOptions} />
  <SelectField _key="statusId" label="Status" options={itemStatusFilterOptions} />
</Form>

value and onChange are injected into the Select components. Nothing new, this is similar to Ant Design fields.

Move logic to separate files. Kind of a no-brainer, but sometimes hard to name things.

const itemTypeFilterOptions = buildItemTypeFilterOptions(Object.values(ItemTypes));

Use containers (controllers) and views to separate logic from display. Another no-brainer, but this has allowed me to easily view the structure of a complicated page. I can always drill down into the sub-components, but I can see the big picture without scrolling.