{"action":"created","issue":{"url":"https://api.github.com/repos/styled-components/styled-components/issues/134","repository_url":"https://api.github.com/repos/styled-components/styled-components","labels_url":"https://api.github.com/repos/styled-components/styled-components/issues/134/labels{/name}","comments_url":"https://api.github.com/repos/styled-components/styled-components/issues/134/comments","events_url":"https://api.github.com/repos/styled-components/styled-components/issues/134/events","html_url":"https://github.com/styled-components/styled-components/issues/134","id":184804384,"number":134,"title":"Question: How to manage styles that change for every render of a component","user":{"login":"JamieDixon","id":1519443,"avatar_url":"https://avatars.githubusercontent.com/u/1519443?v=3","gravatar_id":"","url":"https://api.github.com/users/JamieDixon","html_url":"https://github.com/JamieDixon","followers_url":"https://api.github.com/users/JamieDixon/followers","following_url":"https://api.github.com/users/JamieDixon/following{/other_user}","gists_url":"https://api.github.com/users/JamieDixon/gists{/gist_id}","starred_url":"https://api.github.com/users/JamieDixon/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/JamieDixon/subscriptions","organizations_url":"https://api.github.com/users/JamieDixon/orgs","repos_url":"https://api.github.com/users/JamieDixon/repos","events_url":"https://api.github.com/users/JamieDixon/events{/privacy}","received_events_url":"https://api.github.com/users/JamieDixon/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2016-10-24T10:32:34Z","updated_at":"2016-10-25T16:08:14Z","closed_at":null,"body":"Example component:\r\n```\r\nconst Comp = styled.div`\r\n     /*lots of styles here*/\r\n     animation-delay: ${ props => props.index * 0.1 };\r\n`;\r\n```\r\n\r\nWith this component rendered over a collection of items, we'll generate a new style tag with an associated class for each one.\r\n\r\nIs there a recommended way of working with these kinds of styles so as not to thrash the head with  a new `style` tag everytime `render` is called on `Comp`?\r\n\r\n- One solution could be to move the `/* lots of styles here */` into another component that doesn't include the dynamic properties that cause huge amounts of CSS to be rendered into the `head`. This way the generated `style` tag only contains the `animation-delay` property. Still a lot of `style` tags being injected into the head though and since the injection only happens at render time, this could cause some trashing.\r\n- Another option is to put the `animationDelay` into the `style` prop of the component as we compose the components and not let styled-components handle this.\r\n\r\nHow would you do this? Is there a recommended approach?\r\n\r\nI saw there might be some plans to extract static styles which, as a solution, is similar to our first option above."},"comment":{"url":"https://api.github.com/repos/styled-components/styled-components/issues/comments/256081296","html_url":"https://github.com/styled-components/styled-components/issues/134#issuecomment-256081296","issue_url":"https://api.github.com/repos/styled-components/styled-components/issues/134","id":256081296,"user":{"login":"vdanchenkov","id":2461813,"avatar_url":"https://avatars.githubusercontent.com/u/2461813?v=3","gravatar_id":"","url":"https://api.github.com/users/vdanchenkov","html_url":"https://github.com/vdanchenkov","followers_url":"https://api.github.com/users/vdanchenkov/followers","following_url":"https://api.github.com/users/vdanchenkov/following{/other_user}","gists_url":"https://api.github.com/users/vdanchenkov/gists{/gist_id}","starred_url":"https://api.github.com/users/vdanchenkov/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vdanchenkov/subscriptions","organizations_url":"https://api.github.com/users/vdanchenkov/orgs","repos_url":"https://api.github.com/users/vdanchenkov/repos","events_url":"https://api.github.com/users/vdanchenkov/events{/privacy}","received_events_url":"https://api.github.com/users/vdanchenkov/received_events","type":"User","site_admin":false},"created_at":"2016-10-25T16:08:14Z","updated_at":"2016-10-25T16:08:14Z","body":"Comparison of animation done directly with style prop and with styled-components. http://www.webpackbin.com/VJ3-tBukf  In this example animation with props is about 2 times slower on first run. "}}
{"actor":{"display_login":"vdanchenkov"}}