pephub UI removes samples in progress if you switch to a different tab without saving about pephub

[nleroy917]

I think I have solved this. The core issue, is that the <SampleTable /> component was re-rendering when you clicked back over to the tab. Using the react profiler I was able to trace the exact reason why it rerendered. It ended up being that the onChange prop changed when the user refocused the window.

The onChange prop was tied to the setNewProjectSamples function. I am really not too sure why that function was changing. It was probably something way upstream triggering some other rerenders while we check for the user's session validity (look into localStorage, etc).

Anyways. React has a convenient useCallback hook:

useCallback is a React Hook that lets you cache a function definition between re-renders.

So we can cache that setNewProjectSamples function in between renders and now the sample table won't re-render.