title: Transform class component to functionnal component in reactJS
body: <p>I would like to make a parralax effect in react.</p>
  
  <p>I have found a tutorial <a href="https://medium.com/@relasine/building-a-parallax-header-in-react-301d0ab9fd96" rel="nofollow noreferrer">on medium</a> that explains how.</p>
  
  <p>My code is written in functionnal component, but in example it's class component.</p>
  
  <p>Here's the example</p>
  
  <pre><code>class Header extends React.Component {
    constructor() {
      super()
  
      this.state = {
        offset: 0
      };
    }
  return (
    &lt;header 
      className='header-background'
      style={{ backgroundPositionY: this.state.offset}}
    &gt;
      &lt;section
        className='info-container'
        style={{ bottom: this.state.offset / 2 }}
      &gt;
        &lt;h1&gt;Kevin Simpson&lt;/h1&gt;
        &lt;h3&gt;Front End Developer&lt;/h3&gt;
      &lt;/section&gt;
    &lt;/header&gt;
  )
  }
  
  componentDidMount() {
    window.addEventListener('scroll', this.parallaxShift);
  }
  componentWillUnmount() {
    window.removeEventListener('scroll', this.parallaxShift);
  }
  parallaxShift = () =&gt; {
    this.setState({
      offset: window.pageYOffset
    });
  };
  </code></pre>
  
  <p>I transformed it as to functional with my knowledges </p>
  
  <pre><code>const [offset, setOffset] = useState(0);
  useEffect(() =&gt; {
      window.addEventListener('scroll', setOffset(window.pageYOffset));
  });
  return (
    ...
    &lt;svg style={{ bottom: offset }} className="border-circle" width={107} height={107} viewBox="0 0 107 107" &gt;
    ....
  </code></pre>
  
  <p>Actually no <code>setOffset</code> is fired when I scroll, the event listener is not triggering events.</p>