DEV Community: Aditya Saini

How to fetch data from API in ReactJS

Aditya Saini — Wed, 08 Mar 2023 03:06:26 +0000

Web development nowadays seems incomplete without API's as most of the websites we build are using some kind of API to power a feature in it or to use some kind of data. Fetching data from an API is fairly easy to understand in JavaScript but in React you might get a little confused about the use of useEffect hook in addition with the other fetching code used in vanilla JavaScript.

We use useEffect hook in react to fetch data from an API by fetching data inside of useEffect hook but why we can’t fetch data in React like as we do in vanilla JavaScript?

You might answer it like this, because it is React.
Hmmm… That might be a good answer to it.

Let’s understand it by firstly fetching data same as we fetch in Vanilla JavaScript and then see what is the behaviour and find out the reason why we fetch data inside useEffect hook.

The Problem

In React we store data fetched from the API in a state using setState callback because a state makes data convenient to be shared among child components using props.
So, we have created a state named info Which we will be using to store data fetched from JSON placeholder API (api that provide a test data) and we will use the fetch API for this purpose.

What we are doing below is we are fetching the data inside the function fetchData and setting that data to info state using setInfo callback and below the function we are calling the function and in the return statement of the component we are rendering the title property (info.title) of the data we have got from the API.

The catch here is to go to App.jsx file by dragging from left to right in the embedded editor and uncommenting the console.log(info) that is below the fetchData() function callback and you will observe a unusual behaviour in the console. (You may uncomment it again after this as this would take a significant space of your CPU.)

You will notice that the console.log is running an infinite loop by giving the same output again and again but why is this happening?

This issue is occurring because the component is getting rendered again and again but why it is rendering in an infinite loop?

It is because whenever we are fetching data from the API we are setting it to the state info using setInfo callback and we know in React when a state is changed the component automatically re-renders causing the fetch request to fetch data again and set data to the state again and due to which the component gets rendered again and that is why the console log is running on infinite loop. and this situation is also termed as sideEffect where we do something outside the scope of React.

So you might think that we can avoid using state to store data to counter this problem but it would not be a good practice because state is a powerful feature that let’s you change the exiting data , share it to other child components via props. So that meant we needed something else to counter this problem. That is where useEffect hook came as savior.

useEffect hook

The useEffect hook helps us to perform side efffects in our components like fetching data, directly updating DOM etc.
useEffect hook takes two arguments: - a callback function, dependency array.
useEffect(<function>, <dependency>)
Although the second argument is optional and we will learn more about it further in the article.

Fetching Data using useEffect hook

The fetch request inside useEffect will look like this

useEffect(() => {
  fetch("https://jsonplaceholder.typicode.com/todos/1")
       .then(res => res.json())
       .then(data => setState(data))
}, [])

The useEffect hooks syntax looks pretty straight forward with fetch request wrapped inside the hook and the other argument can have three possible inputs, nothing, empty array and array containing state, props or both.

The useEffect hook always run the callback function that is inside of it after the component has been rendered and here fetch request gets initiated after the component is rendered and the data is fetched and set to the info state and after that the question is whether the useEffect needs to be run again after once it has been executed which depends on the dependency array as follow: -

No dependency array - useEffect runs the callback function everytime after the component it is in gets rendered. In simple words callback function is dependent on everything (state, props of that component).

   useEffect(() => {
     fetch("https://jsonplaceholder.typicode.com/todos/1")
       .then(res => res.json())
       .then(data => setState(data))
   })

Empty dependency array ([]) - useEffect runs the callback function only one time after the component gets rendered first time. In simple words callback function is dependent on nothing.

useEffect(() => {
  fetch("https://jsonplaceholder.typicode.com/todos/1")
       .then(res => res.json())
       .then(data => setState(data))
}, [])

Filled Dependency array ([state, props]) - useEffect runs the callback function everytime the state/props that is inside the dependecy array updates. In simple words callback function is dependent on particular states and props.

useEffect(() => {
  fetch("https://jsonplaceholder.typicode.com/todos/1")
       .then(res => res.json())
       .then(data => setState(data))
}, [state, props])

The Solution

So now we have an understanding of useEffect we have to choose what we should add as dependency array input to counter the problem we were facing.

The problem was, the component was getting rendered again and again causing infinite loop.

Say if we used useEffect with no dependency array, this wouldn't solve our problem because still when the useEffect would run the state will be updated and again which will result in infinite loop as the component will render again and causing state to be updated again.

So the answer to it will be using empty dependency array as we need to fetch data once the component has been rendered.

Yes this was the solution to our problem that we countered previously as you can see the console now there is no infinite loop.

Hmm... What about the third input of dependency array the filled one, this can be used when you need to fetch data again once a particular state or prop changes.

I hope you like the article. Do let me know in comments if you were unable to understand something or if you liked the article.

Health issues faced by developers and their remedies

Aditya Saini — Thu, 02 Mar 2023 04:48:40 +0000

Health is wealth

You would have countered this quote many a times in your life but as we grow up and start working we forget the message of this quote.

Same was my story, Before I graduated from High School I was a sports enthusiast, who played a lot and my fitness at that time was really great but now after about 6-7 months into web development. I have seen a great downfall in my fitness which I feel bad about, I have gained a lot of belly fat and now my body is turning from an athletic body to an obese body.

This was the time when I started realised that how much effect programming can have on, not only our physical fitness but also mental health and I thought of talking about these problems faced by me and others in their development career and provide some remedies that I am also following.

Let's first have a look at what kind of health problems a developer faces while working.

Health Problems faced by Developers

Excessive Weight Gain

The desk job and work from home or the ease to learn online while staying at home are good for our comfort but has a bad impact on our weight and results in excessive weight gain. This usually happens when we are eating unhealthy food and such food requires a lot more time to digest and we as developers work most of the times sitting on chair with hands on the keyboard resulting in slower digestion of food and ultimately weight gain. These results aren't over night but can be observed after 2-3 months.

Pain in Neck, Back and shoulders

While working developers sit for long hours and we all know that no one can sit for a very long time maintaining a good posture and this is also true for developers which results in neck, back and shoulders pain as we are constantly looking at screen and there is not much movement of neck, back and shoulders. These small pains daily can also lead to some serious health issues like ...

Poor Vision

The most obvious health issue that everyone points out as being a developer which is a result of long screen time is weakening eye sight as we developers are not only creators, creating things for others but we also are consumers, learning and using about those products which increases our screen time even more than the general public.

Fatigue and Stress

Sitting for longer duration results in tiredness. Most developers also get stressed as we constantly keep on finding solutions to our problems aka bugs even while we are doing something else in our daily routine. This also affects our sleeping cycle resulting in stress.

Remedies to these Problems

Most of the remedies listed below require a mere 30-40 minutes of your day and some people might argue that they are busy a lot and don't have time for these things but as I started the article I shared the quote "Health is Wealth" and I believe if you cannot manage few minutes for your Health then you will be missing a lot of benefits in the long run.

Exercising

There is nothing better than doing workout, if you are having any kind of health problems. Doing an intensely focused bodyweight workout at home has many benefits like increased productivity, less tiredness, good body posture, reduced stress and many more. I am recommending some exercises that you can do and remember to do proper stretching before and after doing workout.
If you have any kind of severe fractures or any other kind of serious health problem. Kindly consult your doctor prior going for any kind of workout exercises.

Army Push Ups - Link to video
Sit Ups - Link to video
Squats - Link to video
Plank - Link to video

These are some of the exercises that mostly will cure your problems. Although you can find many other exercises on youtube and apps like Home Workout.

Meditation

Focusing on your breath while keeping your eyes closed in sitting position helps you attain a lot of focus, reduces your stress levels. It also has a great impact on your digestion. If you always get panic or you always have some kind of thoughts going on in your head then you should definitely practise meditation to calm your soul and body.

Running or Jogging

People who work from home and other learners who are learning online to become developers spend a lot of time at home, making them sit at a single place and ultimately resulting in lack of creativity, fatigue and stress. A quick jog or run across a park in the morning or evening can calm your thoughts and increase your blood circulation across the body which lowers your stress levels and also increases your creativity.

Yoga

Yoga as exercise consists of various asanas (postures) which can help you gain mental and physical well being. Yoga helps to increase your flexibility, cure for all kind of muscle pains, increase stamina and lesser fatigue and stress. There are a lot of asanas (postures) in yoga and suggesting a few best fit for everyone is difficult as some asanas (postures) are difficult to be perform and some are easier. So you should try exploring different asanas (postures) and get best fit for you and your problems.

Conclusion

We should not risk our health for anything because if we are well we can achieve anything in life and without it nothing is achievable. These were some of the problems that I myself had faced in my development career till now and I have suggested a few remedies to them. If you have any other problems and cures. You should share them below.

A short guide to web accessibility

Aditya Saini — Tue, 14 Feb 2023 11:20:26 +0000

What is meant by web accessibility?

Web accessibility refers to the practice of making websites and web applications accessible by individuals with disabilities. This includes ensuring that users with any kind of visual, auditory, motor, and cognitive impairments can perceive, understand, navigate, and interact with the web content and controls smoothly and efficiently.

Why web needs to be accessible for everyone?

Web needs to accessible for everyone not only because it shows our kind nature towards people with disabilities but also because we are bound to do it by the law as said by the United Nations Convention on the Rights of Persons with Disabilities, the access to information and communications technologies, including the web, is defined as a basic human right and would you ever dare to violate someone's right?

Anddddd... There is also a huge impact of web accessibility on your website's business.

Impact of web accessibility on businesses

The influence web accessibility can have on your business can just be huge and can be valued using the stat that about 15-20% of the world's population has some sort of disability and they have about $13 trillion as annual disposable income but still 96.8% of home pages of 1 million top websites have WCAG 2 failures as of WebAIM's 2022 data.

The facts about these potential business benefits of web accessibility can be a article of its own.
So why you will ignore this opportunity whether you are a developer, businessman or content creator and owns a website, because the demand is high but the supply is limited.

How people with disabilities surf the internet?

When I myself came to know about the accessibility topic while learning to code, the first thought I got was how people with disabilities are surfing the internet and a quick google search made me know that people with different disabilities use different techniques to use internet. Here I list some: -

Blind people: - Browse the web using screen readers
People with low vision: - Use extra large monitors and also increase default font size.
Deaf people: - Use captions to understand any audio content.
People with motor skills deficiency: - Use things like head-mouse, head-pointer or mouth-stick, voice-recognition software, an eye-gaze system or other assistive technologies.

How to make your website and content accessible?

Now you know that accessibility cannot only help disabled people surf the web but also it can be beneficial for your business also, now the question arises what things we should keep in mind while making content so that it is accessible for everyone.
Web accessibility techniques depends on the content you are having on your website and I am providing the easy checks that you can keep in your mind while employing accessibility. For further information about accessibility. Go to W3C

Here are the practises that you can apply: -

Descriptive Page Title: - Page titles are the first thing that a screen reader reads and people using screen readers get an idea about what is the content inside this page and what tab they are on. So you should try making your Page titles descriptive and unique than other content on your website.
The title elements goes inside the head tag as shown below: -
```
<head>
<title>A guide to web accessibility | adityasaini3 </title>
</head>
```
Alt text: - Image alternative text are used to convey the purpose of any image out the screen reader users which are mostly blind people, that's why you should use alt attributes in your img tag to make to make images accessible to screen reader users.
```
<img src="myPic.jpg" alt="here goes the alternative text" />
```
If you are using any image to perform an action you should provide the alternative text according to the action not the image,for example:- Say you have an image of a home which you are using to navigate to home page instead of naming alt as "home" you should name its action which will be "navigate to homepage".
Headings: - Heading provide a structure to your website's content and makes it obvious for any disabled person where something end and a new thing starts that is why we should employ using different number of heading tags for different level of heading. As we know heading tag ranges from h1 to h6.
Contrast ratio: - The color of the text and background can influence people's difficulty to comprehend the text. Some people are unable to read dark text on light background and vice versa. So to counter this most people use contrast ratio of colours so that text get's accessible for everyone. The contrast ratio used for normal-size text is 4.5:1.

Conclusion

The disabled people also have their right to access the web and we should ensure that thing in mind while making any website. The market of disabled people is also huge which can help you boost your business as most people are just ignoring them and if you would make your website accessible to everyone, you will definitely enjoy the advantage from others.
As this was a short guide I will not be going in much more details and For more on accessibility you can visit W3C.

DEV Community: Aditya Saini

How to fetch data from API in ReactJS

The Problem

useEffect hook

Fetching Data using useEffect hook

The Solution

Health issues faced by developers and their remedies

Health Problems faced by Developers

Excessive Weight Gain

Pain in Neck, Back and shoulders

Poor Vision

Fatigue and Stress

Other Mental Health Problems

Remedies to these Problems

Exercising

Meditation

Running or Jogging

Yoga

Conclusion

A short guide to web accessibility

What is meant by web accessibility?

Why web needs to be accessible for everyone?

Impact of web accessibility on businesses

How people with disabilities surf the internet?

How to make your website and content accessible?

Conclusion