Transform class component to functionnal component in reactJS

Question

I would like to make a parralax effect in react.

I have found a tutorial on medium that explains how.

My code is written in functionnal component, but in example it's class component.

Here's the example

class Header extends React.Component {
  constructor() {
    super()

    this.state = {
      offset: 0
    };
  }
return (
  <header 
    className='header-background'
    style={{ backgroundPositionY: this.state.offset}}
  >
    <section
      className='info-container'
      style={{ bottom: this.state.offset / 2 }}
    >
      <h1>Kevin Simpson</h1>
      <h3>Front End Developer</h3>
    </section>
  </header>
)
}

componentDidMount() {
  window.addEventListener('scroll', this.parallaxShift);
}
componentWillUnmount() {
  window.removeEventListener('scroll', this.parallaxShift);
}
parallaxShift = () => {
  this.setState({
    offset: window.pageYOffset
  });
};

I transformed it as to functional with my knowledges

const [offset, setOffset] = useState(0);
useEffect(() => {
    window.addEventListener('scroll', setOffset(window.pageYOffset));
});
return (
  ...
  <svg style={{ bottom: offset }} className="border-circle" width={107} height={107} viewBox="0 0 107 107" >
  ....

Actually no setOffset is fired when I scroll, the event listener is not triggering events.

DpK · Accepted Answer · 2020-05-04 01:20:46Z

1

I see three issues with your code

You are not removing your listener. This would cause memory leaks i.e performance issues.
The second parameter of addEventListener has to be a function definition rather than a function call.
useEffect executes everytime the component updates. To have the same functionality as componentDidMount add an empty array as the second parameter of useEffect so that its called only once after component initialization/mounting.

useEffect(() => { window.addEventListener('scroll', () => setOffset(window.pageYOffset)); return () => window.removeEventListener('scroll', () => setOffset(window.pageYOffset)); },[]);

Writing your useEffect like this should work

answered May 4, 2020 at 1:20

DpK

1004 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

infodev Over a year ago

thanks that helps, but I don't know when I update html elements dynamically they get above other superposed html elements, without animation it's under

Collectives™ on Stack Overflow

Transform class component to functionnal component in reactJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related