React Hooks and neo4j Session

Hi there. This is the setup I am using to fetch data from Neo4j using my React app. I using the bolt javascript driver. Question is if anyone has experience with the performance of this approach using react Hooks and this cleanup function?

const neo4j = require('neo4j-driver').v1;

export const MyNeo4jCall = (props, options) => {
    let isSubscribed = true
    const query =
        `
        match (d: data)
        return d
        `
        const driver = neo4j.driver(<MYSERVER>, neo4j.auth.basic(<MYUSERNAME>, <MYSECRET>), {disableLosslessIntegers: true})
        const session = driver.session()
    if (isSubscribed) {
    session 
    .run(query, parameters)
    .then(res => {
        props.onClose(res)
        session.close()
    })
    .catch(function (error)
    {console.log(error); 
    session.close();});  
    }
return () => isSubscribed = false 
}```

That is a pretty broad question!

Are we talking graph performance (i.e. how will that query run) or browser performance (how will the webpage run)?

I think there is also some confusion in your code, looks like you want to be using the useEffect hook which takes a function and optional dependencies, runs that function on component lifecycle methods (unless the dependencies were given and have not changed) and if that function returns a method it runs that method on component destruction?

so something like:

export const useRunQuery = (props, options) => {
  useEffect(() => {
    const query = `MATCH (d:data) RETURN d`;
    const driver = neo4j.driver(/*other stuff*/);
    const session = driver.session();
    session.run(query, parameters) // where are parameters from?
       .then ((res) => {
          props.onClose(res);
         session.close();
      }).catch((error) => {
         console.log('oops', error);
        session.close();
     });
  // return the close function of driver so it will close when component is done
    return driver.close;
}, [] /* use an empty array here to say "NEVER RE-RUN ME"*/);
}

if something like that is what you have in mind... could work depends on how many of these components are starting up to run queries, how intense the query is on the graph to run (i.e. if it takes a long time) and how much data it returns (and how much of that data you display / how you display it).

Hope something in all that helps!

Thank you.

I have a parameters constant which I forgot to include.

edited: you are correct. I did some testing and when I have intensive requests, if I dont close the the session hangs. Another interesting I discovered is that despite updating the Hook once the data changed, it was not updating. I realized this was because the read query was faster than the merge query :slight_smile: so I had to add a timeout function to delay the reading of the data.

ended up with this setup but need to do more testing:

   useEffect (() => {
       const driver = neo4j.driver(url , neo4j.auth.basic(username, password), {connectionTimeout: 5000, disableLosslessIntegers: true})
       const session = driver.session()
       const parameters = {search:{id: state.id}}
       function addData() {
           session 
           .run('unwind $search as search match (d: data id:{search.id}) ', parameters)
           .then (recs => {
               setHits(recs)
               session.close();
             })
           .catch(function (error) {
             console.log(error)
             session.close();
           });         
       }
       setTimeout(addData, 150)
       return () => driver.close()
   }, [props])```