React Hooks are the feature that was introduced in React version 16.8, allowing us to use state and other class components features in our functional components. Out of all the hooks introduced, there is one salient hook named the UseEffect.

The useEffect hook is a boon for the functional components. It basically allows us to execute side effects in our functional components. Side effects here are referring to api calls to the backend server, interacting with browser APIs, i.e. using document or window, and unanticipated timer functions such as setTimeout and setInterval. In short, the side effects are those whose results are in general unpredictable.However, we can perform side effects without using the mentioned hook within the component body itself.

Here we are making an API call in the document body. It might not throw an error , but would definitely hamper the rendering process, which is why this is not the right technique. We can make use of useEffect for these side effects.Below are the steps to use the UseEffect hook in our functional components:Import it from “react”Call it above the returned JSX 

There are two state variables; counter and inputValue. Counter state variable is being updated with the click of the Increment button. And whenever we would increment the value of counter the console in the useEffect hook will be printed. The reason being, we have passed the counter state variable in the dependency array parameter of the useEffect hook.On the other hand, the same hook won’t be called whenever we update the inputValue variable, since we haven’t passed it in the array parameter. If we would have done so, the console in useEffect would have been called on both the state variables updation i.e., the counter and the inputValue variable.useEffect provides the functionality of three life cycle methods to the functional components:componentDidMount()Once we pass an empty array as a second parameter in the useEffect hook, it runs only once, i.e. at the time of component mounting.

Here, the console in the function returned from useEffect will be called when the component unmounts.Hence, any necessary action to be performed during unmounting can be performed here.Principally, actions in unmounting are executed to perform cleanup. Cleanup here is referring to cleaning up the code before the component gets unmounted for ex., clearing the interval. The cleanup can prevent memory leaks and remove unwanted things.Some use-cases for the same are:

useEffect Hook – Reactjs

In short, an SSG is a framework designed to manage your website and transform it into a site serving only static pages.One thing that took me some time to comprehend was why I would use a static site, if I already had a CMS. There were so many articles online about using an SSG with a headless CMS...but why? 

Best I can tell, the benefits are simply that you have more flexibility using familiar frameworks such as React or Vue, while using a CMS to handle all content.However, as I am by no means a frontend developer, I was close to scrapping this project. I thought Oh well, I should just use Ghost - it's only $5/month if hosted on a platform like DigitalOcean, and is an all-in-one platform to serve content as well as manage the content.However, I really wanted to try to learn something new, and see if I could just deploy a blog for free using only Markdown.As always ends up happening, what I was hoping would take a few hours took quite a bit more time as I went down the rabbit hole of research into various technologies.I played around with several different technologies, such as (not all of these are SSGs, more on that later

Other potentially useful front matter elements are:description - This allows you to enter a description for the content.expiryDate - Set a datetime for when the content should no longer be published.keywords - The meta keywords for the content.lastmod - The datetime for when the content was last modified (if you are using the enableGitInfo configuration command, this will be automatically set as the last time the file was mofieid in Git)markup - When set to rst, you can use reStructuredText instead of Markdown (this feature is experimental)publishDate - Set a date in the future for the content to be displayed.slug - The tail of the output URL. Defaults to the filename if not specified.summary - The text used when providing a summary of the article. I find this useful if I don't want the first paragraph to appear in the summary, which is the typical default.<taxonomies> - Use the plural form of the taxonomy index, such as tags or categories 

Now that we have our site stored in Git, it's time to deploy! Almost done - I'll now show how to deploy to Netlify in under 10 minutes.First, we need to create the Netlify application (feel free to create an account using any method available):You should now see your domain with a message saying to Check DNS configuration. Click on that, and enter the provided DNS record information into whichever service provider manages your DNS records:

We have one final step before we are truly ready to use Netlify. Unfortunately, the version of Hugo used by Netlify is somewhat outdated by default. However, we can fix this by creating our own configuration for Netlify to follow when deploying our site.First, create a file called netlify.toml in the root of your repository, and then add the following configuration:If I were to incorporate a lot of media, such as images or videos that I need to upload, it would certainly get tedious adding and organizing them all to the images folder in static.At that point, I would look into a headless CMS such as Ghost, Netlify, or Sanity to manage the content, as long as I could still write my posts using Markdown.

How to Build a Blog Using a Static Site Generator and a CDN

gRPC: Google Remote Procedure Call is a Google-developed open-source framework. The gRPC lets you define REQUEST AND RESPONSE for Remote Procedure Call and lessens your struggle by handling the rest.We all know how popular and successful NodeJs is. So, in this tutorial, we will implement gRPC services in NodeJs. We will build a demo application and perform a CRUD operation. So without further ado let’s get started with the implementation of gRPC services in our NodeJS application.  

First of all, we have imported @grpc/grpc-js and @grpc/proto-loader libraries. The const variable named PROTO PATH will save the location of students.proto file. Later, loadSync method will load the proto file into gRPC. And loadPackageDefinition method will load the package definition. After that, to initialize the server instance () we will call new grpc.server Create Client stub We will call the getAll method defined in Server’s addService method as the second parameter from the client, as shown below.For inserting data create a new method. Open the proto file and under services, you can add an RPC with the name of the new method. Here, the name of our method is Insert under StudentService service as shown below.

We now have a server, proto, and client all built and ready. Attach a Node server to the client.js so an endpoint in our server will call the procedure in the gRPC news service. Here are the endpoints./GET endpoint will call the getAll sub-routine to get all the students in the database./save POST endpoint will call the insert sub-routine to create a new student item./update PUT will call the update sub-routine to edit/update a student item./remove DELETE will call the delete sub-routine to delete a student item.Here’s the code in Nodejs:

So, this was about how can we implement gRPC services in NodeJS. I hope your purpose of landing on this tutorial has served you well. If you are a NodeJS enthusiast then feel free to visit the NodeJS tutorials page and learn more about Node. We are always open to suggestions and feedback. Write us back if you have any questions. Bacancy has best NodeJS developers with basic and advanced knowledge; contact us to hire NodeJs developers for your application.

WeIt is necessary to measure and monitor the Node Js performance of your existing Node application to have a better overall performance idea.Once you are aware of the performance of your application, you can easily optimize your web application to get maximum performance. Below are the few key points product owners can consider in making their web applications highly scalable.

Blogs

useEffect Hook – Reactjs

How to Build a Blog Using a Static Site Generator and a CDN

How to Implement gRPC services in NodeJS?