trae410

import React, { useState, useEffect } from 'react'
  
  const App = () => {
   	const [docs, setDocs] = useState(null)
    const [isFetchingDocs, setIsFetchingDocs] = useState(false)
    const userId = "user123"

    const getDocs = (userId) => {
      // some async functoin
      console.log("function getDocs ran")

trae410

import React, { useState, useEffect, useRef } from 'react'
  
  // This component would be conditionally rendered inside a parent component so that we can test the memory leak
  // eg: if condition === 'a' render UsersDocs else render SomeOtherPage
  // I havent tested this code but the real scenario has multiple different types of usersDocs to get 
  // and multiple different isFetchingDocs states

  // the goal is to fetch and set the data only once with no memory leak errors and no eslint exhaustive or missing deps warnings
  
  const UsersDocs = () => {

trae410

// this is all front end

function getHash(string) {
  function str2ab(str) {
    var buf = new ArrayBuffer(str.length*2); // 2 bytes for each char
    var bufView = new Uint16Array(buf);
    for (var i=0, strLen=str.length; i < strLen; i++) {
    bufView[i] = str.charCodeAt(i);
    }
    return buf;