Templee_0309) React onChange input value not working due-to immediate re-render

Problem

as soon as I put the input at the 'top' element,
it immediately re-render the component at 'each text' I type in

which makes it impossible for me to keep writing new texts ...

Reason : creating styled components, 'inside' the component , not 'outside' the component

import styled from 'styled-components'

const StyledSpan = styled.span`
    color: blue;
`
const MyExampleComponent = () =>{
    return <StyledSpan>Test</StyledSpan>
}

this will result in same error

Solution : move creating styled component 'outside' the component

import styled from 'styled-components'

const StyledSpan = styled.span`
        color: blue;
    `

const MyExampleComponent = () =>{

    
    return <StyledSpan>Test</StyledSpan>
}