Question: I created an app to connect to Oracle and load data to tables. I build exe and it also runs fine on my machine. However when we tried to run on my friend's machine it gives error DPI-1047: Cannot locate a 64 bit Oracle Client library.
We explicitly set the PATH variable and pointed to the correct Oracle client
He can connect to database with TOAD with the same path. For some reason the app gives this error.
We made sure that the path used by TOAD is setup as first entry in the PATH variable.
We also tried to setup a new Environmental variable and read from there.
We also tried to explicitly setup the path in the code. But no resolution.

Do I need to install Python on his machine? Or Am I missing something?
I though Oracle client is all needed on machine for the app to work.
Only difference is I am admin of my machine but he is NOT administrator of his machine. But we made sure that oci.dll file has 'Read and Execute' permission for his user.

Answer: 
You could create your custom "fetching hook" and there you can fetch the data and set the loading state:

```js
const { useEffect, useState } = React

const useFetchUsers = () => {
  const [users, setUsers] = useState([])
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    setLoading(() => true)
    // setTimeout added to emphasize async nature
    setTimeout(() => {
      fetch('https://jsonplaceholder.typicode.com/users/')
        .then(response => response.json())
        .then(json => setUsers(() => json))
        .finally(setLoading(() => false))
    }, 1000)

  }, [])

  return {
    users,
    loading,
  }
}

const UserItem = ({ id, name, username, email }) => {
  return (
    <div>
      {name} - {username} - {email}
    </div>
  )
}

const App = () => {
  const { users, loading } = useFetchUsers()

  return (
    <div>
      {
        !loading
        ? users.map((user) => {
          return (
            <UserItem
              key={user.id}
              {...user}
            />
          )
        })
        : "Loading users..."
      }
    </div>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
```

```html
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>
```
Ok so this was not as trivial as I thought (at least for me), huge thanks to @Bergi and to @muka.gergely and the authors of this resource that helped me get the final solution: <https://www.debuggr.io/react-update-unmounted-component/>

This is what I came with:

```
export const LayoutValidator=({children})=>{
  const {invalid, auth} = useFetchToken()
  return !invalid ? <Intermediate children={children}/> : <Navigate to="/" />
}

function Intermediate ({children}) {
  const {invalid, auth} = useFetchToken()
  return !auth ? <SplashScreen/> : children
}

function useFetchToken() {

  const { token } = JSON.parse(localStorage.getItem("loggedUser") || '{}')
  const [invalid, setInvalid] = useState(false)
  const [auth, setAuth] = useState(false)

  useEffect(()=>{
    let mounted = true
    setInvalid(() => true)
    fetch(`${urlValue}/api/validate-token`, {
    method: "POST",
    headers: {
      authorization: token,
    }
  })
    .then(ans => ans.json())
    .then(ans => mounted && setAuth(()=>ans.auth))
    .catch(err => console.log(err))
    .finally(setInvalid(()=>false))

    return () => mounted = false;
  },[])
  return {invalid, auth}
}

```

In my situation, it worked perfectly, hope this helps someone in the future.