Higher Order Components

These can be created with functional components or class components

link - smashingmagazine.com/2020/06/higher-order-components-react/

We can write a higher-other function that takes the currency symbol and also the decimal separator.
This same function would then format the value passed to it with the currency symbol and decimal operators.
We would name our higher-order function formatCurrency.

const formatCurrency = function( 
    currencySymbol, 
    decimalSeparator  ) { 
    return function( value ) { 
        const wholePart = Math.trunc( value / 100 ); 
        let fractionalPart = value % 100; 
        if ( fractionalPart < 10 ) { 
            fractionalPart = '0' + fractionalPart;  
        } 
        return `${currencySymbol}${wholePart}${decimalSeparator}${fractionalPart}`; 
    } 
} 

getLabel = formatCurrency( '$', '.' ); 
 
> getLabel( 1999 ) 
$19.99 //formatted value 
 
> getLabel( 2499 ) 
$24.99 //formatted value 

1) How can you optimize performance for a function component that always renders the same way?
Wrap it in the React.memo higher-order component.