Prevent avoidable re-renders on GeistBackdrop (modal)

[ggrossetie]

trafficstars

Bug report 🐞

Version & Environment

• Version of browser: Chrome 113.0.5672.126
• Version of geist-ui/core: 2.3.8

Expected Behaviour

GeistBackdrop should not re-render. I'm using @welldone-software/why-did-you-render which notifies me about potentially avoidable re-renders.

It seems that we should use useCallback for instance on closeFromBackdrop:

https://github.com/geist-org/geist-ui/blob/b48b8238e7aaf92b2aa3749a688e4ffcb29476e4/components/modal/modal.tsx#L78-L81

Actual results (or Errors)

GeistBackdrop
{GeistBackdrop: ƒ} 'Re-rendered because of props changes:'

props.onClick
different functions with the same name. (more info at http://bit.ly/wdyr02)
{prev onClick: ƒ} '!==' {next onClick: ƒ}

props.onKeyDown
different functions with the same name. (more info at http://bit.ly/wdyr02)
{prev onKeyDown: ƒ} '!==' {next onKeyDown: ƒ}

props.onKeyDownCapture
ddifferent functions with the same name. (more info at http://bit.ly/wdyr02)
{prev onKeyDownCapture: ƒ} '!==' {next onKeyDownCapture: ƒ}

props.onKeyPress
different functions with the same name. (more info at http://bit.ly/wdyr02)
{prev onKeyPress: ƒ} '!==' {next onKeyPress: ƒ}

props.onKeyPressCapture
different functions with the same name. (more info at http://bit.ly/wdyr02)
{prev onKeyPressCapture: ƒ} '!==' {next onKeyPressCapture: ƒ}

props.onKeyUp
different functions with the same name. (more info at http://bit.ly/wdyr02)
{prev onKeyUp: ƒ} '!==' {next onKeyUp: ƒ}

props.onKeyUpCapture
different functions with the same name. (more info at http://bit.ly/wdyr02)
{prev onKeyUpCapture: ƒ} '!==' {next onKeyUpCapture: ƒ}

props.children
different React elements (remember that the <jsx/> syntax always produces a *NEW* immutable React element so a component that receives <jsx/> as props always re-renders). (more info at http://bit.ly/wdyr02)
{prev children: {…}} '!==' {next children: {…}}