I try to figure out why a styled-ponent button is re-rendered when I click on it, while there is no re-render when the button is not styled.

I have a function ponent that renders a clickable button styled with styled-ponents. When the button is clicked, the action is triggered as expected but the styled button is re-rendered on each click and I can see from the chrome devtools that a new class is generated each time.

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-ponents';

const Button = ({ onClickButton }) => {
  const WrappedButton = styled.button`
    background-color: #CCC;
    width: 2rem;
    height: 2rem;
  `;

    return (
      <WrappedButton 
        type="button"
        onClick={onClickButton} 
      />
    )
};

export default Button;

When the button is not styled, the action is triggered and the button is not re-rendered, as expected:

return (
  <button 
    type="button"
    onClick={onClickButton} 
  />
)

Thanks in advance for your help !

I try to figure out why a styled-ponent button is re-rendered when I click on it, while there is no re-render when the button is not styled.

I have a function ponent that renders a clickable button styled with styled-ponents. When the button is clicked, the action is triggered as expected but the styled button is re-rendered on each click and I can see from the chrome devtools that a new class is generated each time.

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-ponents';

const Button = ({ onClickButton }) => {
  const WrappedButton = styled.button`
    background-color: #CCC;
    width: 2rem;
    height: 2rem;
  `;

    return (
      <WrappedButton 
        type="button"
        onClick={onClickButton} 
      />
    )
};

export default Button;

When the button is not styled, the action is triggered and the button is not re-rendered, as expected:

return (
  <button 
    type="button"
    onClick={onClickButton} 
  />
)

Thanks in advance for your help !

• javascript
• reactjs
• styled-ponents

• What does onClickButton do? You set state in there, at a guess? – rrd Commented Sep 9, 2019 at 13:43
• 1 I don't think it's the cause but you should move WrappedButton outside of the Button. That will be recreated every time the Button renders – skovy Commented Sep 9, 2019 at 13:51
• It's a function connected to a redux store in a parent ponent. – Tom Commented Sep 9, 2019 at 13:52
• Thanks @skovy. I moved the styles outside the function ponent and it works now ! You should make your ment an answer. – Tom Commented Sep 9, 2019 at 13:58

2 Answers 2

You should move the WrappedButton outside of the Button. That will be recreated every time the Button renders. This is likely what is accounting for the new class in every re-render.

import React from "react";
import PropTypes from "prop-types";
import styled from "styled-ponents";

const WrappedButton = styled.button`
  background-color: #ccc;
  width: 2rem;
  height: 2rem;
`;

const Button = ({ onClickButton }) => {
  return <WrappedButton type="button" onClick={onClickButton} />;
};

export default Button;

Try hoisting the WrappedButton ponent initialisation outside of the render function as follows and use React.memo to memoize/make the ponent a PureComponent

import React, { memo } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-ponents';

const WrappedButton = memo(styled.button`
    background-color: #CCC;
    width: 2rem;
    height: 2rem;
  `);

const Button = memo(({ onClickButton }) => {

    return (
      <WrappedButton 
        type="button"
        onClick={onClickButton} 
      />
    )
});

export default Button;