How to Build Tetris in React - GameDev Tutorial (with React Hooks!)
video description
Date: 2022-03-14
Related videos
Comments and reviews: 10
Robert
For the last section, I'm getting the error -The 'linePoints' array makes the dependencies of useCallback Hook (at line 15) change on every render. Move it inside the useCallback callback. Alternatively, wrap the initialization of 'linePoints' in its own useMemo() Hook.- in the useGameStatus.js file. It's making it so the score doesn't render when lines are cleared. I can't figure out why that's happening. I've tried using React.useMemo(), and putting both inside the callback function and on line 2 before the export.
reply
For the last section, I'm getting the error -The 'linePoints' array makes the dependencies of useCallback Hook (at line 15) change on every render. Move it inside the useCallback callback. Alternatively, wrap the initialization of 'linePoints' in its own useMemo() Hook.- in the useGameStatus.js file. It's making it so the score doesn't render when lines are cleared. I can't figure out why that's happening. I've tried using React.useMemo(), and putting both inside the callback function and on line 2 before the export.
reply
Dremmerd
I feel like I've looked over my code for a couple hours trying to figure this problem out so hopefully someone has some advice for me. for whatever reason something seems to be updating twice or even 4 times. When my code piece is dropping, the console.log of (re-render) in the tetris.js is running 4 times in my console. in addition, all my moves of left right or down, are going twice... Any help would be greatly appreciated.
reply
I feel like I've looked over my code for a couple hours trying to figure this problem out so hopefully someone has some advice for me. for whatever reason something seems to be updating twice or even 4 times. When my code piece is dropping, the console.log of (re-render) in the tetris.js is running 4 times in my console. in addition, all my moves of left right or down, are going twice... Any help would be greatly appreciated.
reply
Gagan
Just an FYI, there will be odd behaviour when running in strictmode (default now with Create React App), to avoid the odd behaviour you need to make sure you follow the rules of hooks, especially Don-t call Hooks inside loops, conditions, or nested functions! keep use state updater function pure (no side effects)
reply
Just an FYI, there will be odd behaviour when running in strictmode (default now with Create React App), to avoid the odd behaviour you need to make sure you follow the rules of hooks, especially Don-t call Hooks inside loops, conditions, or nested functions! keep use state updater function pure (no side effects)
reply
Toosdai
I feel as though I followed it to a t however about an hour and a half in, and keep getting 'STAGE_WIDTH' is not defined in './src/hooks/usePlayer.js'. is there something I missed? I didn't think we needed to import ../gameHelpers.js into the usePlayer.js
reply
I feel as though I followed it to a t however about an hour and a half in, and keep getting 'STAGE_WIDTH' is not defined in './src/hooks/usePlayer.js'. is there something I missed? I didn't think we needed to import ../gameHelpers.js into the usePlayer.js
reply
Ignacio
Man, this is just an amazing demo. I've been using React for a year now and I though it would be fun to try follow along this. I ended up learning a lot, amazing example usage of React hooks and optimizations. Thank you very much for this content!
reply
Man, this is just an amazing demo. I've been using React for a year now and I though it would be fun to try follow along this. I ended up learning a lot, amazing example usage of React hooks and optimizations. Thank you very much for this content!
reply
Yiqi
I came across an interesting bug... when the tetrominos pieces hit the left wall they lose their -shape-. However, after I removed the tag which contains inside -index.js-, the bug went away.
Anyone know why React Strict Mode causes this bug?
reply
I came across an interesting bug... when the tetrominos pieces hit the left wall they lose their -shape-. However, after I removed the tag which contains inside -index.js-, the bug went away.
Anyone know why React Strict Mode causes this bug?
reply
Jay
Infinite re-render issue. After passing resetPlayer to the useStage, my version became stuck constantly re-rendering. The issue for me was caused by not passing an empty array to the resetPlayer callback.useCallback(()=>-...code here-,[]) function.
reply
Infinite re-render issue. After passing resetPlayer to the useStage, my version became stuck constantly re-rendering. The issue for me was caused by not passing an empty array to the resetPlayer callback.useCallback(()=>-...code here-,[]) function.
reply
James
I got to where you finished 'Stage update and player movement'. Everything seems identical , except my pieces are always moving by two spaces instead of one. Both for movePlayer() and drop(). Any idea why? Has anyone else encountered this?
reply
I got to where you finished 'Stage update and player movement'. Everything seems identical , except my pieces are always moving by two spaces instead of one. Both for movePlayer() and drop(). Any idea why? Has anyone else encountered this?
reply
Natty
Why is it when you make the createStage function in the gameHelper.js file you do not use curly braces? I used curly braces in mine and it -broke- but I was able to track down that that was the problem though I do not understand why
reply
Why is it when you make the createStage function in the gameHelper.js file you do not use curly braces? I used curly braces in mine and it -broke- but I was able to track down that that was the problem though I do not understand why
reply
Vaughan
My page has a scroll bar for vertical and horizontal.
It causes my screen to go down when I push the down arrow.
Any suggestions where I may have made a mistake?
reply
My page has a scroll bar for vertical and horizontal.
It causes my screen to go down when I push the down arrow.
Any suggestions where I may have made a mistake?
reply
Add a review, comment
Other channel videos
7:38:39
2:10:19
