There is one interesting thing that I've learned when trying to do one of the tickets the other day. This is actually something I've done before but never thought about explicitly.

The ticket was about formatting a number. It was a simple ticket. The back end sends us the data, and one of the properties is a number, e.g. 2000000.234. And we need to make it look good, i.e. 2,000,000.23 in that component.

Now, we can fix it right inside the component, e.g.

//...
<Component>
  {new Intl.NumberFormat('en-GB', {
    style: 'currency',
    currency: 'GBP',
  }).format(number)}
</Component>
//...

But the correct approach would be to create an abstraction that we can reuse. e.g.

// React component
<Number>{number}</Number>

// Or a util function
formatNumber(number)

Because more often than not, this is not the only time when we'd need to format such property.

Same goes for other aspects of your projects. Like colours, for example. If you need to add a colour, chances are that you'll need it more than once. So this colour needs to be inside some sort of config or a theme file, whether it's a .css variable

/* ... */
--color-custom-green: #bada55;

or a ThemeProvider theme property

const theme = {
  colors: {
    customGreen: '#bada55',
  },
}

That way, your code will be DRY'er, you'll be consisting with the values that you use across your poject, and if things change, it'll be much faster and easier to refactor, i.e. just change a value in the config or variable, and Bob's your uncle. 👍