1
0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-28 00:06:53 +01:00
unleash.unleash/website/docs/contributing/frontend/ADR/preferred-component-props-usage.md
Fredrik Strand Oseberg 50fb671b66
Docs/dev docs (#2134)
* docs: add ADRs

* docs/adrs

* fix: update developer guide

* fix: add space

* Update website/docs/contributing/backend/overview.md

Co-authored-by: Ivar Conradi Østhus <ivar@getunleash.ai>

* docs: remove auto-generated sidebar

This should've been in .gitignore, but has only been ignored to the
ignore file for the website subdirectory. (This has been fixed on main.)

* docs: delete empty file

* Revert "docs: delete empty file"

This reverts commit 2435f173ff.

* docs: add frontmatter to new dev docs

* Docs(fix): add quotes around page titles

In yaml, the colon is a special character, so we need to use quotes.

* docs: fix remaining titles

* Update website/docs/contributing/backend/overview.md

Co-authored-by: Ivar Conradi Østhus <ivar@getunleash.ai>

* fix: update empty ADR

* fix: update text to reflect postgres 12

* fix: update backend overview

* fix: remove link

* fix: add form ADR

Co-authored-by: Ivar Conradi Østhus <ivar@getunleash.ai>
Co-authored-by: Thomas Heartman <thomas@getunleash.ai>
2022-10-19 14:32:37 +02:00

1.1 KiB

title
ADR: Preferred component props usage

Background

In the codebase, we have found a need to standardise how to use props, in order to easily be able to figure out what a component is doing and what properties it is given without having to look up the interface.

Decision

We have decided to use props destructuring inline in components in order to quickly display what properties a component is using.

// Do:
const MyComponent = ({ name, age, occupation }: IComponentProps) => {
    return (
        <div>
            <p>{age}</p>
            <p>{name}</p>
            <p>{occupation}</p>
        </>
    )
};

// Don't:
function MyComponent(props) {
       return (
        <div>
            <p>{props.age}</p>
            <p>{props.name}</p>
            <p>{props.occupation}</p>
        </>
    )
}

The reason for this decision is to remove mental clutter and free up capacity to easily navigate the codebase. In addition, when components grow, the ability to look at the signature and instantly know what dependencies this component uses gives you an advantage when scanning the codebase.