styled-no-update.js

import styled from "styled-components";

const mapPoint = ({ position }) => ({
  style: {
    top: position.top,
    left: position.left
  }
});

// api styled позволяет через атрибуты навесить стили
// Такой подход позволит убрать один апдейт стилей в рантайме
const Point = styled.div.attrs(mapPoint)`
  position: absolute;
  border: 1px solid blue;
  width: 50px;
  height: 50px;
  background: red;
`;

// такой вариант так же уберет лишний апдейт стайледа
const Button = styled.button`
  &[data-variant="primary"] {
    background: red  
  }
 &[data-variant="secondary"] {
    background: green  
  }
 &[data-variant="success"] {
    background: yellow  
  }
`

/**
  Usage
 const [position, setPosition] = React.useState({ top: 0, left: 0 });
 <Point position={position}>Point</Point>
 <Button data-variant="primary">click</Button>
*/