Add the Provider

Now we'll enter React land!

First we need to create a PouchDB database and make it available to our app. To do this, we wrap our app with the <Provider /> API provided by usePouchDB. But unlike with React-Redux's <Provider /> we won't be doing it in index.js, but in the App.js component.

// App.js
import React, { useState, useEffect } from "react";
import "./App.css";

import PouchDB from "pouchdb-browser";
import { Provider } from "use-pouchdb";

export default function App() {
  const [db, setDB] = useState(() => new PouchDB("local"));

  useEffect(() => {
    const listener = (dbName) => {
      if (dbName === "local") {
        setDB(new PouchDB("local"));
      }
    };

    PouchDB.on("destroyed", listener);
    return () => {
      PouchDB.removeListener("destroyed", listener);
    };
  }, []);

  return (
    <Provider pouchdb={db}>
      <div className="App">Add the future components here</div>
    </Provider>
  );
}

What is happening here?

A local database contains the data of an user. When a user logs out, we must delete their data. When we destroy a db, all it's data will be deleted, without syncing the deletion. The database will be completely removed from disk.

But we can't use a destroyed database in hooks! That's why we instantly re-create a new database with the same name. But it will not have any data from the old one.