I built a wordle clone in react

General
1

I created a wordle clone in react

github link for the project

Do check it out guys :hugs:.

1 Like
2

This looks and works great!

What was the hardest part about putting this together? What are some things you learned in the process?

3

There was a “shallow copy” bug where I was accidently changing a state variable too ( without using setState), whenever i changed the other variable. This troubled me a lot.

There was a bug where I was creating a new instance of the custom hook every time my component re-rendered because of state change. This was causing the “keyup” eventListener to be attached to a different function ( obtained from this custom hook) every time. Also, I didn’t clear the previously attached eventListeners. This was giving undesired results.

I had some troubles with what state to choose, how to update it and where to place our state so that it can be used by multiple components.

The input grid ( 6 row grid ) was the hardest to implement.

I learnt things like:

  • put extra logic in a custom hook
  • backspace won’t fire with the “keypress” eventListener. So, we gotta use “keyup” or “keydown”
  • how to deal with this shallow copy issue
  • useEffect for setting and cleaning up the eventListeners.
4

I built a hangman clone too.