My component only renders when I make an edit to my IDE (React , Firebase & useEffect)-CodePudding

I have a child component that doesnt render unless I make an direct edit in my IDE code. I have tried multiple ways of doing it. Im trying to get an data for an array but when i refresh or first render the page in the console it shows as empty. Ive seen others have similar issues but doesnt seem like we have the exact same problem.

I have tried multiple ways of doing this with useEffect but nothing seems to work. Here is my code.

const NextVideo = ({courseName}) => {

  const [videos, setVideos] = useState([]);
  // const [loading, setLoading] = useState(false);

  // const dataWork = async () => {
  //   const q = query(collection(db, 'videos'), where('courseID', '==', courseName));
  //   const querySnapshot = await getDocs(q);
  //   let videos = []
  //   querySnapshot.forEach((doc) => {
  //     videos.push({
  //       ...doc.data(),
  //       id: doc.id,
  //     });
  //     setVideos(videos);
  //   });
  // }
  
  // useEffect (() =>{
  //   dataWork()
  // }, []); 
   
  //  useEffect(() => {  
  //   const q = query(collection(db, 'videos'), where('courseID', '==', courseName));
  //   const unsubscribe = onSnapshot(q, (querySnapshot) => {
  //   const videos = []
  //     if( videos.length === 0){
  //       querySnapshot.forEach((doc) => {
  //           videos.push({...doc.data(), id: doc.id });  
  //           setVideos(videos);             
  //       });
  //     }else{
  //       console.log('This array already exist')
  //     }
  //   });
  // return () => unsubscribe();
  // }, []);

  const everything = () =>{
    const q = query(collection(db, 'videos'), where('courseID', '==', courseName));
    const unsubscribe = onSnapshot(q, (querySnapshot) => {
    const videos = []
      if( videos.length === 0){
        querySnapshot.forEach((doc) => {
            videos.push({...doc.data(), id: doc.id });  
            setVideos(videos);             
        });
      }else{
        console.log('This array already exist')
      }
    });
   }
  
    useEffect(() => {  
     everything();
    }, []);


console.log(videos)

  return (

    <>
        <Row className="mt-4">
            <Col xs="12" sm="12" md="12" lg="8">
              <video height="500" controls>
                <source="https://vimeo.com/347119375" type="video/mp4"/>
              </video>
                  <h3 style={{textAlign:"left", color: '#fcc981', fontWeight:"bold"}}>Video Title</h3>
          </Col>
          <Col>
          <Stack className="vBody" gap={3}>
          {videos.map((video)=>(
                  <div key={video.title} className="py-3 px-2" style={{background: '#0F0C0E'}}>
                    <h5 style={{fontWeight:'bold'}}>{video.title}</h5>
                  <ul>
                  <li>Length: {video.videoLength}</li>
                  <li>Now Watching</li>            
                  </ul>
                  </div>
          ))}
          </Stack> 
          </Col>
        </Row>
        <Stack className="vBody">
        <h4>Description:</h4>
          <p> Words </p>
          <h4>Instructor(s): </h4>
          <p> Names</p>
          <Accordion className="mt-4" defaultActiveKey="0">
          <Accordion.Item eventKey="0">
          <Accordion.Header><h4>Transcript</h4></Accordion.Header>
          <Accordion.Body style={{backgroundColor: '#0F0C0E', color: '#ffffff'}}>
            <p></p>
          </Accordion.Body>
          </Accordion.Item>
          </Accordion>
        </Stack> 
     </>     
  );
}

export default NextVideo;

CodePudding user response：

One thing I noticed is that you're not returning anything from your useEffect callback, which means React will have a hard time managing the lifecycle of the component. Not sure if this is the cause of the problem you describe, but you'll definitely want to update it either way to:

const everything = () => {
  const q = query(collection(db, 'videos'), where('courseID', '==', courseName));
  const unsubscribe = onSnapshot(q, (querySnapshot) => {
    const videos = []
    if( videos.length === 0){
      querySnapshot.forEach((doc) => {
          videos.push({...doc.data(), id: doc.id });  
          setVideos(videos);             
      });
    }else{
      console.log('This array already exist')
    }
  });
  return unsubscribe; //