Learn useEffect React Hook in 10 Minutes | React Hooks Tutorial for Beginners

In this video we are going learn everything about React Hook useEffect. We will understand the Class component lifecycle methods and their use in various scenarios than we will apply same lifecycle methods effects in functional component using useEffect hook. We will how we can use the useEffect hook to achieve component did mount or component did update method and also how we can do the cleanup of subscriptions on component destroy.

***Checkout pre-requites videos in case you have missed ***
Learn useState React Hook in 15 Minutes - https://youtu.be/P24EuJlVKb0
How to Learn React JS ? - https://youtu.be/06yVj8pcO5c
React JS Fundamentals Project for Beginners - https://youtu.be/QoJGKwo20is
Learn React Router With Project - https://youtu.be/kMBjhiGYoLY

🔥 Covered 👇

useEffect hook understanding
useEffect for component mount and update effect
useEffect dependency array
useEffect clean function

Checkout these video to understand better
Learn JSON in 25 Minutes - https://youtu.be/6OhMbf2v_jI
JavaScript this Keyword - https://youtu.be/S2pBGSeUFCk
JavaScript ES6 Arrow Functions - https://youtu.be/TgzVxiPdCDU
JavaScript Higher Order Functions & Arrays Methods - https://youtu.be/m2_kagsc3_c
JavaScript ES6 Destructuring - https://youtu.be/rpYg2M2lNAE

Checkout my crash courses for get started with web development
JavaScript Tutorial For Beginners | Part 1 - https://youtu.be/t6_waVDdG-E JavaScript Tutorial For Beginners | Part 2 - https://youtu.be/LRLMs0TCflE
JavaScript Tutorial For Beginners | Part 3 - https://youtu.be/sqpy36PNAdk
JavaScript Tutorial For Beginners | Part 4 - https://youtu.be/MQrR0nrvg8o
HTML5 Crash Course in 1 Hour - https://youtu.be/Aj3QFsmsagc
CSS Crash Course in 1 Hour - https://youtu.be/nYsk_U_A_lc

🔗 Social Medias 🔗
Twitter: https://twitter.com/IMDmalvia
Facebook: https://www.facebook.com/dipesh.malvia
Instagram: https://www.instagram.com/dipeshmalvia
LinkedIn: https://www.linkedin.com/in/dmalvia/

https://youtu.be/Mb2eSelr5Ig

#react

What is GEEK

Buddha Community

Learn useEffect React Hook in 10 Minutes | React Hooks Tutorial for Beginners

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

Performance: It delivers optimal performance.
Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
UI design: React Native enables you to design simple and responsive UI for your mobile app.
3rd party plugins: This framework supports 3rd party plugins.
Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
Near-native user experience: React Native provides several native components, and these are platform agnostic.
The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Abhishek Jaiswal

1607768450

What are hooks in React JS? - INFO AT ONE

In this article, you will learn what are hooks in React JS? and when to use react hooks? React JS is developed by Facebook in the year 2013. There are many students and the new developers who have confusion between react and hooks in react. Well, it is not different, react is a programming language and hooks is a function which is used in react programming language.
Read More:- https://infoatone.com/what-are-hooks-in-react-js/

#react #hooks in react #react hooks example #react js projects for beginners #what are hooks in react js? #when to use react hooks

Mark Mara

1607399166

Class-less Components in React

While coding this week, I had to convert one of my class components in React to a functional component.

Why would I need to do that? After all, the parent component sees the two types of components as identical. Sure, functional components can be shorter, require less boilerplate, and maybe even perform better. But that’s not why I needed to do it. I was using an npm package that had React hooks and hooks are for functional components only. React Hooks, added in React 16.8, allow functional components to manage state and replace lifecycle methods. To use the hook I needed I had to convert my class components to a functional.

Here are the steps I followed to change my class component to a functional component:

#react-hook-useeffect #useeffect #react-hook #react-hook-usestate #react

Dipesh Malvia

1628751894

Learn React JS Hooks | React Hooks Tutorial | React Hooks Explained | React Hooks for Beginners

This video is a complete React Hooks Crash Course for beginners in. React hooks are building blocks of function component. We will cover each react hook with detailed explanation and examples. We will see how when we should use any react hook and when not. At last we will build a custom react hook.

🔥 Video contents... ENJOY 👇

0:00:00 - Intro
0:02:22 - useState
0:18:38 - useEffect
0:28:31 - useRef
0:38:33 - useMemo
0:49:16 - useCallback
0:58:56 - useContext
1:08:45 - useReducer
1:24:16 - Build Custom React Hook
1:36:47 - Outro

***Checkout my crash courses for get started with web development***

HTML5 Crash Course in 1 Hour - https://youtu.be/Aj3QFsmsagc
CSS Crash Course in 1 Hour - https://youtu.be/nYsk_U_A_lc
JavaScript Tutorial in 2 Hours - https://youtu.be/sptS-bgg8Ro

🔗 Social Medias 🔗

Twitter: https://twitter.com/IMDmalvia
Facebook: https://www.facebook.com/programmingwithdipesh
Instagram: https://www.instagram.com/dipeshmalvia
LinkedIn: https://www.linkedin.com/in/dmalvia/

⭐️ Hashtags ⭐️

#react #reacthooks #beginners #tutorial

Lore Duran

1573181692

React Hooks Tutorial: Learn `useState` and `useEffect` in 5 minutes

Sometimes 5 minutes is all you’ve got. So in this article, we’re just going to touch on two of the most used hooks in React: useState and useEffect.

If you’re not famliar with hooks, here’s the TL;DR: because of hooks, there’s almost no more need for class-based components. Hooks let you “hook into” the underlying lifecycle and state changes of a component within a functional component. More than that, they often also improve readability and organization of your components.

`useState`

Let’s begin with a functional component.

import React from 'react';

function App() {
  return (
    <div>
      <h1>0</h1>
      <button>Change!</button>
    </div>
  );
}

Counter at 0

As you can see, nothing fancy at the moment. We’re just rendering some text and a (useless) button.

Now let’s import our very first hook, useState to learn how to handle state in our functional component.

As this hook is a function, let’s console.log what we get returned from it.

import React, { useState } from 'react';

function App() {
  const value = useState();
  console.log(value);

  return (
    <div>
      <h1>0</h1>
      <button>Change!</button>
    </div>
  );
}

In the console, we get an array

> [null, ƒ()]

And when we pass an argument to useState

const value = useState(true);

In the console, we get an array with our value as the first member.

> [true, ƒ()]

Now, in our component, we can access our state at value[0] and render it in <h1> instead of a hardcoded value.

import React, { useState } from 'react';

function App() {
  const value = useState(0);
  console.log(value); // [0, ƒ()]

  return (
    <div>
      <h1>{value[0]}</h1>
      <button>Change!</button>
    </div>
  );
}

Counter at 0

We can improve our code by using array destructuring to store the value from useState hook. It’s similar to object destructuring, which tends to be a bit more commonly seen. In case you’re not super familiar with object destructuring, here’s a quick recap:

const person = {
  name: 'Joe',
  age: 42
};

// creates 2 const values from person object
const { name, age } = person;
console.log(name); // 'Joe'
console.log(age); // 42

Array destructing is almost the same, but uses square brackets [] instead of curly braces {}.

A quick tip: in object destructuring, the names of created variables must match the names of properties in the object. For array destructuring, that’s not the case. It’s all about the order. The benefit here is we can name the items whatever we want.

Using array destructuring, we can get the initial value of state from the useState() hook.

import React, { useState } from 'react';

function App() {
  // remember, there's a second item from the array that's missing here, but we'll come right back to use it soon
  const [count] = useState(0);  

  return (
    <div>
      <h1>{count}</h1>
      <button>Change!</button>
    </div>
  );
}

OK, we’ve got the initial state value. How do we change the value in the state with hooks?

Remember that useState() hook returns an array with 2 members. The second member is a function that updates the state!

const [count, setCount] = useState(0);

You can, of course, call it what you wish, but by convention, it’s normally called with prefix “set-”, and then whatever state variable we wish to update was called, so setCount it is.

It’s simple to use this function. Just call it and pass the new value you want that state to have! Or, just like this.setState in a class component, you can pass a function that receives the old state and returns the new state. Rule of thumb: do this anytime you need to rely on the past state to determine the new state.

To call it, we’ll pass it to the onClick event listener. And just like with a regular setState in a class-based component, we can pass our state update to setCount.

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>
        Change!
      </button>
    </div>
  );
}

We can clean this up a bit, by extracting our state update to a separate function.

function App() {
  const [count, setCount] = useState(0);

  function change() {
    setCount(prevCount => prevCount + 1);
  }

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={change}>Change!</button>
    </div>
  );
}

Great! And now when we can see the counter going up when we click the button.

Counter at 1

Of course, useState can get a lot more complicated than this, but we’ve only got 5 minutes here, so let’s move on to the next hook for now.

`useEffect`

Hooks have simplified quite a few things, compared to the way things were in class-based components. Previously we needed to know a bit about lifecycle methods and which one is best suited for which situation. useEffect hook simplified this situation. If you wish to perform side effects, network request, manual DOM manipulation, event listeners or timeouts and intervals.

useEffect hook can be imported just like useState.

import React, { useState, useEffect } from 'react';

To make useEffect do something, we pass it an anonymous function as an argument. Whenever React re-renders this component, it will run the function we pass to useEffect.

useEffect(() => {
  /* any update can happen here */
});

This is what the whole code might look like.

import React, { useState, useEffect } from 'react';

function App() {
  const [count, setCount] = useState(0);

  function change() {
    setCount(prevCount => prevCount + 1);
  }

  useEffect(() => {
    /* any update can happen here */
  });

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={change}>Change!</button>
    </div>
  );
}

export default App;

As an example, we will use a nice npm package that generates a random color. Feel free to write your own if you wish of course, but for this tutorial, we will just install it, npm i randomcolor, and import.

import randomcolor from 'randomcolor';

Let’s now use our knowledge about useState hook to store some random color in the state.

const [color, setColor] = useState(''); // initial value can be an empty string

We then can then assign the color of the counter we already have.

<h1 style={{ color: color }}>{count}</h1>

Now, just for the sake of it, let’s change the color of the counter on every click of the Change! button. useEffect will run every time the component re-renders, and the component will re-render every time the state is changed.

So if we write the following code, it would get us stuck in an infinite loop! This is a very common gotcha with useEffect

useEffect(() => {
  setColor(randomcolor());
});

setColor updates state, which re-renders the component, which calls useEffect, which runs setColor to update the state, which re-renders the component… Yikes!

We probably only want to run this useEffect when the count variable changes.

To tell useEffect which variable(s) to keep track of, we give an array of such variables as a second argument.

useEffect(() => {
  setColor(randomcolor());
}, [count]);

Counter at 2

This basically says "only run this effect if the count state changes. This way we can change the color and not cause our effect to run infinitely.

Conclusion

There’s a lot more to learn about hooks, but I hope you’ve enjoyed this quick 5-minute peek into hooks.

Happy coding 🤠

#react-js #react #react-hooks #javascript #web-development