Code Style Guide React
React
Here you can find the rules that we follow when building components:
1. Component Props Types
Do define a TS type for the Props of the component even before the component definition.
Consider doing this between the end of the Imports and before the component.
Why? it allows to easily identify what this component is expecting to receive.
Example
// ...imports statements
type PokemonRandomizerProps = {
title: string,
pokemon?: Pokemon,
};
export const PokemonRandomizer = ({
title,
pokemon,
}: PokemonRandomizerProps) => {};
2. Default Props
Do define a default props for not required props
Why? it allows to avoid checking for empty values on the components logic, as you should respect the type of the property
Example
// ...imports statements
type PokemonRandomizerProps = {
title: string,
pokemon?: Pokemon,
};
export const PokemonRandomizer = ({
title,
pokemon,
}: PokemonRandomizerProps) => {};
PokemonRandomizer.defaultProps = {
pokemon: {},
};
3. Destructure Props
Do destructure the props object on every component
Why? it allows to avoid repeating props. everywhere and it's easier to see what the component is expecting
Example
export const PokemonRandomizer = (props: PokemonRandomizerProps) => {}; // WRONG
export const PokemonRandomizer = ({
title,
pokemon,
}: PokemonRandomizerProps) => {}; // GOOD
4. Don't abuse of useMemo and useCallback
Don't add useMemo or useCallback to every function, object or array
Consider not adding them by default, and just use them when it is strictly necessary
Why? they force React to save information on the memory and doesn't allow it to release it as it could be later required. Making abuse of them could lead to memory leaks on the application.