[React Performance] Use CSS Variables instead of React Context?

https://epicreact.dev/css-variables/

 

Code

body[data-theme='light'] {
  --colors-primary: deeppink;
  --colors-background: white;
}
body[data-theme='dark'] {
  --colors-primary: lightpink;
  --colors-background: black;
}

// ThemeProvider:
const PrimaryText = styled.div(({theme}) => ({
  padding: 20,
  color: theme.colors.primary,
  backgroundColor: theme.colors.background,
}))
// CSS Variables:
const PrimaryText = styled.div({
  padding: 20,
  color: 'var(--colors-primary)',
  backgroundColor: 'var(--colors-background)',
})

 

css variables has much less re-render:

 

 

 

But usually React is pretty fast, as a user you can diff two version, what is the difference between two version.

 

From applcation point of view, Context version might be much easier to maintian in the future when app grow.