I've been overwhelmed by how many of you have signed up for the Ship React Challenge. Thank you for signing up!
ICYMI, it's a challenge where you Ship 5 React apps in 5 days.
Here is a theme of what we will be building as part of the challenge,
I'm releasing this to you before everyone else, as newsletter subscribers always get first dibs on everything I've been working on before everyone else. 💖
|Add me to the Challenge 💪
As an email subscriber, you won't need to re-confirm your email.
Just Click the above magical ✨ "add me to the challenge" ✨ button, and you'll be added to the challenge!
You will get a lot of direct help from me and accountability from the community and me, hence take advantage of this challenge.
I'm announcing the challenge on Twitter tomorrow so would appreciate it if you can drop by, comment, RT and show your support. 🙏
Have you ever wondered how, in a framework where you can do both server-side rendering and client-side rendering, we can prevent our client-side code from running on the server? 🤔
In a framework like Next.js, your code will run on the server, but not all code can run on the server. Since the Server doesn't have access to the "window" object and a browser, it's impossible.
So, how can we avoid it? Well, we can avoid it by only invoking the code when the component has mounted and when it's our server running it, skip running client-side code.
Let's go over the snippet below. 👇
In the first snippet, we have created a new React hook called 'useHasMounted' where we set the property of 'hasMounted' to true when useEffect runs the first time. Notice the empty dependency array, which means it will only run when the component has mounted, and until then, hasMounted will be false.
Because useEffect only runs on the client side, it never runs on the server, so it's a good idea to take advantage of it.
In the 2nd snippet, we only render the TwitterFeed component when hasMounted is true. In this case, we don't want to run TwitterFeed on the server as it uses a bunch of client-side code, such as where the Twitter script needs to be loaded.
This custom hook is convenient for preventing code from running on the server. I use it on my website for precisely this purpose.
You can copy-paste this snippet by clicking on the snippet 🎉
I see it as a way to give us quick ideas and get over writer's block, but I don't think it'll replace humans.
That's all from me. Have a great day!