# Code Modularity and Scalability

- Do not mutate an object or state. Use immutability-helper instead.
- When using any exported SVG (from Figma) inside codebase. Follow the given steps:
- Convert the SVG into a React component
- Make the cosmetics (fill, stroke, etc) and dimensional (width and height) attributes configurable. You should use them via props
- Move those static attribute values to the default props of the SVG component
- Segregate a component's logic, queries, mutations and utils/helpers into separate files
- Create separate functions for any new mutations/queries and define them inside that component's module files
- Always try to provide function parameters as an object. Helps to scale function inputs in future also allows naming the individual elements and specifying a different type for each.
- Destructuring: Destructured function parameters should be kept as simple as possible: a single level of unquoted shorthand properties. Deeper levels of nesting and computed properties may not be used in parameter destructuring.
- Example

    function optionalDestructuring([a = 4, b = 2] = []) { … };
    
    /**
     * @param {string} ordinary
     * @param {{num: (number|undefined), str: (string|undefined)}=} param1
     *     num: The number of times to do something.
     *     str: A string to do stuff to.
     */
    function destructured(ordinary, {num, str = 'some default'} = {})

- Disallowed

    function badDestructuring([a, b] = [4, 2]) { … };
    
    /** @param {{x: {num: (number|undefined), str: (string|undefined)}}} param1 */
    function nestedTooDeeply({x: {num, str}}) {};
    /** @param {{num: (number|undefined), str: (string|undefined)}=} param1 */
    function nonShorthandProperty({num: a, str: b} = {}) {};
    /** @param {{a: number, b: number}} param1 */
    function computedKey({a, b, [a + b]: c}) {};
    /** @param {{a: number, b: string}=} param1 */
    function nontrivialDefault({a, b} = {a: 2, b: 4}) {};