Global scope prop in functional react component

Question

I am using react-native-sound for audio in this component and want to play from a url file that is passed to the component. The problem is that if the var audio is declared inside the functional component then each time the component renders the variable is created again and this plays the sound file as a new instance and we have same sound playing multiple times on top of each other.

import Sound from "react-native-sound"

var audio = new Sound.. //Works if declared here but cant's pass url prop

const SoundPlayer: FC<SoundProps> = ({ url }) => {
    const [playing, setPlaying] = useState<boolean | null>(null)

    var audio = new Sound(url, null, (error) => {
        if (error) {
            console.log("failed to load the sound", error)
            return
        }
    })

If I move the var audio outside / above the functional component as a global variable it works fine but then I can not pass the component prop aka url to it as the variable is out of the function component scope. How can I pass a prop that keeps reference and does not recreate on each render?

Stepan Nikulenko · Accepted Answer · 2021-10-29T14:07:25.260

1

Try using useEffect:

const audioRef = useRef(null);
const [duration, setDuration] = useState(0);

useEffect(() => {
   // This will be triggered only once when the component is mounted
   audioRef.current = new Sound(url, null, (error) => {
      if(error) {
         // Here you can implement some retry policy if there was some error loading the sound
         return;
      }

      setDuration(Math.trunc(audioRef.current.getDuration())); 
   });

   return = () => {
     // This will be triggered on component is unmounted
     audioRef.current.release();
   }
}, [audioRef, setDuration]);

P.D.: This code was written on the fly, so further modifications might be needed

edited Oct 29 '21 at 14:07

answered Oct 28 '21 at 04:54

Stepan Nikulenko

613
4
9

When with this but added }, [audioRef] in the useEffect dependency array. – Patrik Rikama-Hinnenberg Oct 28 '21 at 10:19
Tried also to add setDuration(Math.trunc(audioRef.current.getDuration())) inside the useEffect after the new Sound is created but for some reason I can not get the duration of the song gets the value -1. – Patrik Rikama-Hinnenberg Oct 28 '21 at 10:22
1

@PatrikRikama-Hinnenberg are you trying to get the duration in the callback method on Sound creation instance after the sound is loaded without any error? Or just in the line after audioRef.current = new Sound(...)? – Stepan Nikulenko Oct 28 '21 at 17:46
`useEffect(() => { if (audioRef.current === null) { audioRef.current = new Sound(url, null, (error) => { if (error) { console.log("failed to load the sound", error) return } }) } audioRef.current.setVolume(1) setDuration(Math.trunc(audioRef.current.getDuration())) return () => { audioRef.current.release() } }, [audioRef])` – Patrik Rikama-Hinnenberg Oct 29 '21 at 10:42
in same useEffect after new Sound. – Patrik Rikama-Hinnenberg Oct 29 '21 at 10:43
1

In that moment the sound is probably not loaded yet. I'll update my answer with the example. – Stepan Nikulenko Oct 29 '21 at 13:58
Spot on, thanks @Stepan Nikulenko – Patrik Rikama-Hinnenberg Nov 01 '21 at 10:24

mazipan · Answer 2 · 2021-10-28T05:13:39.293

This is the correct use case for useRef (https://reactjs.org/docs/hooks-reference.html#useref)

import Sound from "react-native-sound"

const SoundPlayer: FC<SoundProps> = ({ url }) => {
    const audioRef = useRef(null); 
    const [playing, setPlaying] = useState<boolean | null>(null)

  // use useEffect to hook on mounted
   useEffect(() => {
    if(audioRef.current === null) {
      audioRef.current = new Sound(url, null, (error) => {
        if (error) {
            console.log("failed to load the sound", error)
            return
        }
      })
    }
   }, [])

simetrio · Answer 3 · 2021-10-28T04:52:10.057

0

For example

import Sound from "react-native-sound"

var audio;

const SoundPlayer: FC<SoundProps> = ({ url }) => {
    const [playing, setPlaying] = useState<boolean | null>(null)
    
    useEffect(() => {
      audio = new Sound(url, null, (error) => {
          if (error) {
              console.log("failed to load the sound", error)
              return
          }
      })
    }, [url]);

edited Oct 28 '21 at 04:52

answered Oct 28 '21 at 04:46

simetrio

36
3

Interesting. I thought still that this mutates the variable outside the functional component and thus make it no longer functional instead a stateful component. – Patrik Rikama-Hinnenberg Oct 28 '21 at 11:03

score 0 · Answer 4 · answered Oct 28 '21 at 04:47

0

Wrap in useEffect and have dependency array as [] will run only once or [url] to update when url updates

const [audio, setAudio] = useState(null);
useEffect(() => {
  var ado = new Sound(url, null, (error) => {
    if (error) {
      console.log("failed to load the sound", error);
      return;
    }
  });
  setAudio(ado);
}, [url]);

answered Oct 28 '21 at 04:47

Siva K V

10,561
2
16
29

Simple as that. Is there some negative sides to this vs useRef solution ? – Patrik Rikama-Hinnenberg Oct 28 '21 at 11:04

Global scope prop in functional react component

4 Answers4