#100DaysOfMERN

✏ Making It Work vs. Making It Work The Right Way

Following along with the FullStackOpen course on fullstackopen.com, the next chapter showed how to make a network request with React. I realised that - even though I had made it work in my React Hangman, my code most probably included anti-patterns and bad practice. I went ahead and refactored the code according to what I've learned, but I'm still not sure what's the better approach.

Approach 1 - smells like Vanilla JS

I've a state variable currWords and a function fetchPuzzle that makes a GET request using the Fetch API, and sets the currWords state:

  function fetchPuzzle(wordCount) {
    const url = `https://puzzle.mead.io/puzzle?wordCount=${wordCount}`;
    fetch(`${url}?wordCount=${wordCount}`)
      .then((response) => response.json())
      .then(data => setCurrWords(data.puzzle.split(' ')))
  }

This function is triggered when someone clicks on a button "Start Game":

  function startBtnClick() {
    setGameResult(0);
    fetchPuzzle(maxWords);
  }

(The gameResult state only decides if a lose/win message should be rendered or not. 0 means "game is running").

Approach 2 - smells more like React

The same state variables and the same fetchPuzzle function, but this time I'm triggering it with a useEffect hook:

  useEffect(() => {
      if (gameResult === 0){
          fetchPuzzle(maxWords);
          setGameResult(null)
      }
  }, [maxWords, gameResult])

  function startBtnClick() {
    setGameResult(0);
  }

The latter makes use of React's inbuilt functions (which is good?), but I have some tiny little extra logic because I need the state of gameResult (I don't want to trigger a re-fetch when the user changes maxWords, I only want to fetch after a click on "Start Game"), and I need to set it back to null to avoid an infinite loop.

I guess I still don't really know React, if I can't properly judge which are the downsides and benefits of each approach.

✏ Recap

I've learned

that I still have a lot to learn about React
that fetching data with axios is even easier than with the Fetch API (more about that tomorrow)

✏ Next:

fetching data with axios from a local server
manipulating a local JSON file

✏ Thanks for reading!

I do my best to thoroughly research the things I learn, but if you find any errors or have additions, please leave a comment below, or @ me on Twitter. If you liked this post, I invite you to subsribe to my newsletter. Until next time 👋

✏ Previous Posts

Day 1: Introduction, Node.js, Node.js in the terminal
Day 2: npm, node_modules, package.json and package-lock.json, local vs global installation of packages
Day 3: Create a React app without create-react-app, Webpack, Babel
Day 4: npx and cowsay
Day 5: npm vs. npx, npm audit, semantic versioning and update rules
Day 6: Call stack, event loop, JavaScript engine, JavaScript runtime
Day 7: Call stack and event loop in Node.js, setImmediate()
Day 8: setImmediate(), process.nextTick(), event loop phases in Node.js
Day 9: Network requests with XMLHttpRequest and callbacks
Day 10: Promises
Day 11: Network requests with XMLHttpRequest and Promises
Day 12: React Quiz App part 1
Day 13: React Hangman
Day 14: FullStackOpen course 1: details of GET and POST requests, request headers

#100DaysOfMERN - Day 15