4 things to have in mind when starting a React project

Code debt starts before we realize it
    • Saturday, September 19th 2020
    • 3 minutes read

Forget that Medium article about state management

Or don’t reach for Redux, MobX, etc, before you need it.

It’s perfectly fine to just go with simple, useState. Start with this. Don't go about creating multiple folders and files, when the information we want to persist is strictly scoped.

Are you going to make a network request? Stop, don’t reach for Redux & Redux-thunk. Will we need to reuse the payload the second time we mount this component? If it’s outdated and we need to fetch it every time, then we don’t want to create a global store to save the data. Now, if fetching data is the primary focus of our app, it’s a good idea to consider React-Query or SWR instead.

Next case, Is there a crazy requirement to open sidebars/drawers/menus from random places in the app? Context is a perfect solution for this. People are hesitant to use Context, but for cases like this where we don’t update these values often, it’s perfectly fine. Another similar use-case for Context is theming.

More complex requirements? Try Zustand or why not, even Redux. Just please, don't spin off unnecessary boilerplate that takes more time to configure than build the app.

Simplify your component’s API

Say you have a component that appears in many places. But there is this one odd case where you have to show a badge next to the title. Your first thought is probably to introduce a badge prop, and update the component accordingly.

<Collapse title="Header" isOpen={isOpen} badge="NEW">
  <CheckboxGroup
    name={name}
    options={options}
    value={value}
    onChange={handleCheckboxSelection}
  />
</Collapse>

Before doing that, consider that soon this badge might need different coloring, sizing, or maybe a conditional tooltip. If you proceed you'll end with something like this. We both can imagine the spaghetti code handling that.

<Collapse
  title="Header"
  isOpen={isOpen}
  badgeText="NEW"
  badgeColor="cornflowerBlue"
  badgeSize="small"
>
  <CheckboxGroup
    name={name}
    options={options}
    value={value}
    onChange={handleCheckboxSelection}
  />
</Collapse>

I say let your component be and expose a titleRenderer prop. Fallback to your current implementation as the default case, and let the consumer decide on how to style the title.

function collapseTitleRenderer() {
  return (
    <Heading.h4>
      Header{' '}
      <Text.span size="small" variantColor="cornflowerBlue">
        NEW
      </Text.span>
    </Heading.h4>
  );
}

<Collapse titleRenderer={collapseTitleRenderer}>
  <CheckboxGroup
    name={name}
    options={options}
    value={value}
    onChange={handleCheckboxSelection}
  />
</Collapse>;

When you start adding boolean flags to your components, it’s a good indication that things are about to get messy.

Remember that memoization is costly

Not every component needs to be wrapped in memo. If you're drawing some d3 charts, then it's a valid concern, but most often than not the problem lies with your component's API.

useCallback should also be used in moderation. Unless you're passing the wrapped function down as a prop, you don't have a reason to take the performance hit. The component accepting the function needs to verify that it has the same signature as before. That's all.

Re-renders are not the devil. React is fast and reliable and re-renders mean that the UI is in sync with our state. Our only responsibility is to ensure these are fast by memoizing (useMemo) the expensive calculations. You'll know when you need it.

Drop margins and make your components flexible

From small primitives to more expressive components, try to avoid using margins that affect anything outside itself.

Your <Autosuggest /> component shouldn’t have any margin. It might blend well on the homepage now, but your designer might re-use it in the NavBar next. Might even put it in that tight space just above the filters. Unfortunately, now we have to refactor it.

Moving the responsibility of spacing to the parent element will save you valuable time, and will keep your components reusable in any layout.


Thanks for reading!  ❤️
Next up: "What is a Front-end Developer anyway?"
Back to Blog