0

I'm trying to make use of the sodium-plus and libsodium-wrappers libraries to create a custom React hook that will enable me to use some crypto functionality.

The trouble is I'm getting all confused in the world of async/await and I really need a second pair of eyes to tell me where I'm going wrong !

Sample code: https://codesandbox.io/s/old-sunset-4mnh8

As you can see the useEncryption() custom React hook is called in App.js but I can't make use of the result. I have tried refactoring my code in endless ways but I'm just getting increasingly confused and frustrated.

Would appreciate the assistance. Thanks.

Little Code
  • 1,315
  • 2
  • 16
  • 37
  • 1
    How is your understanding on the use of `useState` and `useEffect`? Use them before refactoring into a custom hook. Reading some tutorials about the use of [React Hooks with Async-Await](https://dev.to/vinodchauhan7/react-hooks-with-async-await-1n9g) may be helpful. – hangindev.com Jun 16 '20 at 11:00
  • Interesting link. I thought I understood `useEffect`, but I thought was only applicable with DOM related interactions ? didn't realise it might have an alternative use. – Little Code Jun 16 '20 at 11:12
  • @Hangindev I've refactored my code a bit along the lines shown in the link and things are looking more promising (https://codesandbox.io/s/epic-boyd-ok6s2). Thank you for the pointer. The only problem is that it seems to be called multiple times ? (i..e look at the `console.log` outputs, duplication). – Little Code Jun 16 '20 at 11:37
  • One thing I'd recommend is placing an empty array as a second argument in the `useEffect` hook if you want it to only run once. Have a read of [Optimizing Performance by Skipping Effects](https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects). – hangindev.com Jun 16 '20 at 12:22
  • @Hangindev I've got a feeling the skipping feature only applies to DOM renders ? I have tried both an empty array (`[]`) and the state variable (`[result]`) and the double logging still occurs (https://codesandbox.io/s/gallant-water-w5txs) – Little Code Jun 16 '20 at 13:03
  • Found this (https://stackoverflow.com/questions/61578158), seems might be something to do with `React.StrictMode` ... I'm going to go test now, but not sure if disabling `React.StrictMode` on a permanent basis is a good plan ? – Little Code Jun 16 '20 at 13:06
  • 1
    If you pass in an empty array and log only inside `useEffect`, you will see that it only runs once, which is probably the desired outcome. I wouldn't worry too much about the double logging inside `App` function. – hangindev.com Jun 16 '20 at 13:37
  • 1
    `useEffect` is not only for DOM related tasks. According to the [Docs](https://reactjs.org/docs/hooks-effect.html), the Effect Hook lets you perform side effects in function components and data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects.. – hangindev.com Jun 16 '20 at 13:39
  • Thanks for all your wisdom @Hangindev. Appreciate it ! – Little Code Jun 16 '20 at 14:40
  • You are welcome. Happy coding! – hangindev.com Jun 16 '20 at 16:21

0 Answers0