react and ref

[harp]

Why do have to use a function in ref when using gsap and react?

 

import React,  { useRef, useEffect } from 'react';

import logo from './logo.svg';

import './App.css';

 

import gsap from 'gsap';

import gsapCore from 'gsap/gsap-core';

 

function App() {

 

  let circleYellow = useRef(null)

  let circleRed = useRef(null)

  let circleBlue = useRef(null)

 

  useEffect(()=> {

    gsap.from(circleYellow, {duration: 0.8, opacity: 0, x: 90, ease: 'power3.out'})

    gsap.from(circleRed, {duration: 0.8, opacity: 0, x: 90, ease: 'power3.out'})

    gsap.from(circleBlue, {duration: 0.8, opacity: 0, x: 90, ease: 'power3.out'})

  }, [])

 

  return (

    <div className="App">

      <header className="App-header">

        <div className="circle-container">

          <div ref={el => circleYellow = el} className="circle circle--yellow"></div>  <--- when I use just circleYellow I get this error: TypeError: Cannot add property _gsap, object is not extensible

          <div ref={el => circleRed = el} className="circle circle--red"></div>

          <div ref={el => circleBlue = el} className="circle circle--blue"></div>

        </div>

      </header>

    </div>

  );

}

[OSUblake]

Hi @harp

 

That's not the correct usage for a ref. 

let circleYellow = useRef(null)

 useEffect(()=> {
    gsap.from(circleYellow.current, {duration: 0.8, opacity: 0, x: 90, ease: 'power3.out'})
  }, [])

<div ref={el => circleYellow.current = el} className="circle circle--yellow"></div>

 

Or...

let circleYellow;

 useEffect(()=> {
    gsap.from(circleYellow, {duration: 0.8, opacity: 0, x: 90, ease: 'power3.out'})
  }, [])

<div ref={el => circleYellow = el} className="circle circle--yellow"></div>

 

Or the recommended way...

let circleYellow = useRef(null)

 useEffect(()=> {
    gsap.from(circleYellow.current, {duration: 0.8, opacity: 0, x: 90, ease: 'power3.out'})
  }, [])

<div ref={circleYellow} className="circle circle--yellow"></div>

 

Please check out React guide. It also shows another way using the selector util.

 

 

[harp]

12 minutes ago, OSUblake said:

Hi @harp

 

That's not the correct usage for a ref. 

let circleYellow = useRef(null)

 useEffect(()=> {
    gsap.from(circleYellow.current, {duration: 0.8, opacity: 0, x: 90, ease: 'power3.out'})
  }, [])

<div ref={el => circleYellow.current = el} className="circle circle--yellow"></div>

 

Or...

let circleYellow;

 useEffect(()=> {
    gsap.from(circleYellow, {duration: 0.8, opacity: 0, x: 90, ease: 'power3.out'})
  }, [])

<div ref={el => circleYellow = el} className="circle circle--yellow"></div>

 

Or the recommended way...

let circleYellow = useRef(null)

 useEffect(()=> {
    gsap.from(circleYellow.current, {duration: 0.8, opacity: 0, x: 90, ease: 'power3.out'})
  }, [])

<div ref={circleYellow} className="circle circle--yellow"></div>

 

Please check out React guide. It also shows another way using the selector util.

 

 

Okay thanks, actually going over that now the youtube video of someone I think was confusing me.

whats does the current mean? 
 

useEffect(()=> {

    gsap.to(boxRef.current, { rotation: "+=360"})

  })

[OSUblake]

The element is on the current property. A ref is just a simple object with a current property. It's the same as doing this.

const boxRef = useState({ current: null })[0];

 

The best way to understand what something is, is to log it out.

 

const boxRef = useRef();
console.log(boxRef) // { current: undefined }

useEffect(() => {
  console.log(boxRef) // { current: div.box }
  gsap.to(boxRef.current, {
    rotation: "+=360"
  });
});

 

To understand why React uses an object with a current property is beyond the scope of this forum, but search around for JavaScript reference vs value. React uses objects for references to allow values to persists between renders.