4

The sx prop from MUI is useful for speed and code readability (in reason) but it can cause many unnecessary re-renders (and this compounds with the sx lesser performance).

So I was wandering if there was a way to add a useMemo wrapped version of the MUI sx props. How would I go about extending MUI to achieve this?

Here a simplified example of what I mean.

Bases situation:

const MyComponent = () => {

  return
    <>
      <Box sx={{color: "red"}}> I am a bit static </Box>
      <Box sx={{width: window.innerWidth + "px"}}> I am so dynamic! </Box>
    </>  
};

This would be the (in this case excessive) optimisation:

const MyComponent = () => {
  const boxStyle = useMemo(() => ({color: "red"}), [])

  return
    <>
      <Box sx={boxStyle}> I am a bit static </Box>
      <Box sx={{width: window.innerWidth + "px"}}> I am so dynamic! </Box>
    </>  
};

This is the "api" I want to achieve by extending MUI:

const MyComponent = () => {

  return
    <>
      <Box sxm={{color: "red"}}> I am a bit static </Box>
      <Box sx={{width: window.innerWidth + "px"}}> I am so dynamic! </Box>
    </>  
};

How I would go about creating this useMemo augmented version of sx, readily availably in any MUI component?

I have seen this package. It could be a step in the good direction.

Clorofilla
  • 415
  • 2
  • 6
  • 1
    I realise maybe the scope of my question is wrong. Trying to extend MUI is too hard and a reusable hook could do the job. This is the closest I got to it. Here the reusable hook: `const sxm = (sxprop: SxProps) => { return { sx: useMemo(() => sxprop, []) }; };` How to use it: `` How can I make it even more concise? – Clorofilla Aug 26 '22 at 18:55

0 Answers0