Functional vs Class Components in React - Everything you need to know

In this article, You’ll see everything you need to know about the Why, How, and When of using functional components in React. You only need a basic understanding of React, although knowing ES6 would be definitely helpful.

What if I told you there was a way to make your React code easier to reason about, easier to test, and achieve better performance? You’d be interested — right? Well, it turns out functional components are an easy way to achieve all of these things and more.

What are Functional Components?

There are two main types of components in React. Class Components and **Functional Components. **The difference is pretty obvious. Class components are ES6 classes and Functional Components are functions. The only constraint for a functional component is to accept props as an argument and return valid JSX.

Let’s take a peek:

function Hello(props){
   return <div>Hello {props.name}</div>
}

Boom, that’s a functional component.

The key thing that makes this type of component different from a class component is the lack of state and lifecycle methods. This is why functional components are also commonly referred to as stateless components.

Here’s the same component, but written in ES6:

const Hello = ({name}) => <div>Hello {name}</div>

If you’ve never seen ES6 before don’t panic. It might look a little weird, but it’s not actually that complicated. This article should get you up to speed pretty quickly. Or you can just take my word that these two code snippets do the exact same thing and keep going.

Here’s the same component, but written as a class component:

class Hello extends Component{
   render(){
      return <div>Hello {this.props.name}</div>
   }
}

This snippet is a contradiction to the most basic rule. If you ever have a class component with only a render method – you should always make it a functional component.

So now you know the key differences that make functional components different from class components. Feel free to play around in Code Pen. This example is simple, but you can experiment with adding logic outside of jsx as well as nesting components.

Why use Functional Components?

You might be wondering what all the fuss is about for a type of component that actually removes functionality. But it turns out constraints are often super valuable.

Let’s get into it. Here are the 6 key reasons to start using functional components:

Functional components are easy to reason about

One of the main benefits of functional components is that they make your code easier to read and understand. If you’re working on a project by yourself, you might not think this is a big deal. But trust me. The first time you take a 1-month hiatus from working on a project and come back trying to figure out what your past self was thinking, you’ll understand.

Functional Components are easier to read in large part because you already know all of the things they **can’t do, **such as have hidden inputs or modify a hidden state. Especially with the use of prop destructuring, it’s very clear what’s going in and coming out of a functional component.

It’s hard to fully understand this benefit until you start more readily using functional components. So I encourage you to dive in. I’ve definitely felt the benefits in my own work.

Functional components are easy to test

It’s easier to test functional components because you don’t have to worry about hidden state or side effects. For every input (props), functional components have exactly one output.

Given certain props, I can assert exactly what the HTML output will be. This means you don’t have to rely on any mocking, state manipulation, or crazy testing libraries. It’s pretty awesome.

Functional components can potentially have a better performance

Since functional components offer no state or lifecycle methods, you would think that this would allow the internals of React to avoid unnecessary overhead such as lifecycle events. Unfortunately, this is currently not the case.

In the words of release notes:

“In the future, we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations”

But even without these optimizations, functional components result in less code and faster bundles. This article estimates the current speed up at ~6% with future improvements estimated at ~45%.

Functional components are easy to debug

Functional components depend only on the props they are given to produce an output which in turn makes debugging easier. There is no need to continuously log the state of the component to understand what is going on.

If you know the props being passed in, it’s easy to trace the path of your code and figure out what is taking place.

Functional components are more reusable

This one might be a bit controversial. But by removing function level state, we often make our components easier to use and more widely applicable. Let’s take a peek at two implementations of a custom checkbox.

Functional Checkbox:

const Checkbox = ({ checked, label, handleClick }) => (
   <div
      className={checked ? 'Checkbox-container checked' : 'Checkbox-container'}
      onClick={handleClick}
      role="button"
      tabIndex={0}
      data-label={label}
   >
      <p className="label" data-label={label}>{label</p>
   </div>
);

Making the checkbox a functional component forces us to strip the component down to its most primitive features, which has the side effect of making it more generally applicable. Think of it as a forced best practice.

The checkbox component does not have to choose what its default state should be or what it should do when clicked. Instead, this is delegated to the higher level component. Could you write a class component in the exact same way? Sure, but a functional component** forces **us to follow best practices which results in a cleaner, more reusable component.

PropTypes

For some reason, some people seem to think that you can’t use PropTypes with functional components. It’s simply not the case. Here’s how I would add PropTypes to the Checkbox component.

Checkbox.propTypes = {
   checked: PropTypes.bool,
   label: PropTypes.string.isRequired,
   handleClick: PropTypes.func.isRequired,
};
 
Checkbox.defaultProps = {
   checked: true,
};

Class Checkbox:

render(){
   return(
      <div
         className={checked ? 'Checkbox-container checked' : 'Checkbox-container'}
         onClick={handleClick}
         role="button"
         tabIndex={0}
         data-label={label}
      >
         <p className="label" data-label={label}>{label</p>
      </div>
   );
}

First, let’s look at the render method of the class-based component. It looks pretty similar, except that we have the “this” keyword everywhere, and the Checkbox is managing some of its own state. It’s a little more confusing, but overall not too bad.

class Checkbox extends Component{
   constructor(){
      super();
      this.state = {
         checked: false,
      };
      this.handleClick = this.handleClick.bind(this);
   }
 
   handleClick(){
      this.setState({
         checked: !this.state.checked,
      })
   }

Now let’s look at the rest of the component. All of this code did not exist in the functional component.

If you’re wondering what that weird “.bind” is in the constructor – it has to do with managing the pesky “this” (you can read all about it here). Another thing we don’t have to deal with when we write functional components. Are you sensing a pattern?

Without meaning to, this example also shows many of the other reasons functional components are often preferable to class components. 11 lines of code compared to a total of 30 for the class component. The functional code is clearly easier to understand, and don’t even get me started about trying to test this class component…

To be fair, this class component is poorly written because I wanted to make a point. But the fact that it is so easy to create such a poorly written class component should tell you something.

Despite the scarier code, this component is really doing the same thing, but managing most of its own state. Because of this, we now have to choose some sensible defaults and hope they work in the future. What if we don’t always want the checkbox to toggle state when checked? Or what if we want our checkbox to start in the checked state? We either have to rely on some hackery or write a totally new component. Not ideal.

**Functional components can reduce coupling **

One of the core concepts used to describe clean code is coupling. Coupling describes the degree of dependency between one entity to another. If our code has low coupling, it means that we can change one area of our code without impacting another. This, in turn, makes our code more maintainable.

Once again, the constraints put in place by functional components force us to extract most of the logic that might normally live inside a component to either a higher level component, a state management library such as Redux, or the new React Context API**. **Separating logic from presentation sounds a lot like low coupling to me :).

When NOT to use Functional Components

If functional components are a hammer, it’s important to remember that not every problem is a nail. Class components are included in React for a reason.

The general heuristic I use is to always start with a functional component. If you find out you need lifecycle methods or it makes sense to have a small piece component level state, it’s trivial to refactor to a class component. I find this style of writing components keeps me from getting lazy and forces me to use functional components to their full potential.

Companies on the cutting edge of React development like Facebook, Netflix, and Airbnb all readily use functional components. It seems pretty clear the upsides outweigh the negatives.

When should you NOT use functional components? When you have no other option.

Recap

• A Functional component is a function that takes props and returns JSX
• They do not have state or lifecycle methods.
• Functional components are easier to read, debug, and test. They offer performance benefits, decreased coupling, and greater reusability.
• They with a few downsides … but I think the benefits strongly outweigh these. Use them whenever you can.
• Functional components are built into React. You can get started adding them (and refactoring unnecessary class components) to your existing projects right away!

#reactjs #javascript

What is GEEK

Buddha Community

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

React 18: Things You Need To Know About React JS Latest Version

The most awaited version of React 18 is finally out now. Its team has finally revealed the alpha version of React 18 and its plan, though the official launch is still pending. This time the team has tried something and released the plan first to know their user feedback because the last version of React 17 was not that much appreciated among developers.

According to Front-end Frameworks Survey, React JS has ranked top in the list of most loved frameworks. Thus, the developer communities expect a bit higher from the framework, so they are less appreciative of the previous launch.
So, this time React 18 will be a blast. For beginners, the team is working on a new approach. They have called a panel of experts, library authors, educators, and developers to take part in a working group. Initially, it will be a small group.

I am not a part of this release but following the team on their GitHub discussion group. After gathering the information from there, I can say that they have planned much better this time.

React 17 was not able to meet the developer's community. The focus was all primarily centered on making it easier to upgrade React itself. React 18 release will be the opposite. It has a lot of features for react developers.

Read more here: React 18: Things You Need To Know About React JS Latest Version

#hire react js developers #hire react js developers india #react developers india #react js developer #react developer #hire react developers

All Lifecycles in Class Components and Similar in Functional Components

Hi, today I’m going to explain the whole lifecycle of the class component also the same in functional components.

What you will learn after reading this article:

• Execution of lifecycles in Class Components and Functional Components from the beginning to the end

• How to implement Class Components lifecycles in Functional Components

• Proper use of lifecycles in the component according to different modes

• Lifecycle differences in Class Component and Functional Component

• Very practical tips about where to call the components and their impact on the implementation of lifecycles

• And other important and practical cases …

So let’s get started.

At first, we want to answer the question, what is the lifecycle of a component?

The lifecycle of a component in virtually all phases of its implementation from zero to one hundred until the component is fully rendered.

Each phase is suitable for a specific operation and events occur in it. So you should use the right life cycle in your component according to your needs, otherwise, it will cause errors and problems in your program.

So now that we understand these things, we are about on to introducing and explaining lifecycles.

The lifecycles of React components are divided into the following 3 sections, each of which will be described below:

1. Mounting: In this step, your initial states and data are initialized

2. Updating: In the update section, you can access your states and data, and you can perform update operations on it

3. Unmounting: And in the last section you can write the operations you want to do before unmounting of a component, such as clearing a SetInterval

#react-lifecycle #react #class-component #reactjs

How to Select and Hire the Best React JS and React Native Developers?

Since March 2020 reached 556 million monthly downloads have increased, It shows that React JS has been steadily growing. React.js also provides a desirable amount of pliancy and efficiency for developing innovative solutions with interactive user interfaces. It’s no surprise that an increasing number of businesses are adopting this technology. How do you select and recruit React.js developers who will propel your project forward? How much does a React developer make? We’ll bring you here all the details you need.

What is React.js?

Facebook built and maintains React.js, an open-source JavaScript library for designing development tools. React.js is used to create single-page applications (SPAs) that can be used in conjunction with React Native to develop native cross-platform apps.

React vs React Native

• React Native is a platform that uses a collection of mobile-specific components provided by the React kit, while React.js is a JavaScript-based library.
• React.js and React Native have similar syntax and workflows, but their implementation is quite different.
• React Native is designed to create native mobile apps that are distinct from those created in Objective-C or Java. React, on the other hand, can be used to develop web apps, hybrid and mobile & desktop applications.
• React Native, in essence, takes the same conceptual UI cornerstones as standard iOS and Android apps and assembles them using React.js syntax to create a rich mobile experience.

What is the Average React Developer Salary?

In the United States, the average React developer salary is $94,205 a year, or $30-$48 per hour, This is one of the highest among JavaScript developers. The starting salary for junior React.js developers is $60,510 per year, rising to $112,480 for senior roles.

* React.js Developer Salary by Country

• United States- $120,000
• Canada - $110,000
• United Kingdom - $71,820
• The Netherlands $49,095
• Spain - $35,423.00
• France - $44,284
• Ukraine - $28,990
• India - $9,843
• Sweden - $55,173
• Singapore - $43,801

In context of software developer wage rates, the United States continues to lead. In high-tech cities like San Francisco and New York, average React developer salaries will hit $98K and $114per year, overall.

However, the need for React.js and React Native developer is outpacing local labour markets. As a result, many businesses have difficulty locating and recruiting them locally.

It’s no surprise that for US and European companies looking for professional and budget engineers, offshore regions like India are becoming especially interesting. This area has a large number of app development companies, a good rate with quality, and a good pool of React.js front-end developers.

As per Linkedin, the country’s IT industry employs over a million React specialists. Furthermore, for the same or less money than hiring a React.js programmer locally, you may recruit someone with much expertise and a broader technical stack.

How to Hire React.js Developers?

• Conduct thorough candidate research, including portfolios and areas of expertise.
• Before you sit down with your interviewing panel, do some homework.
• Examine the final outcome and hire the ideal candidate.

Why is React.js Popular?

React is a very strong framework. React.js makes use of a powerful synchronization method known as Virtual DOM, which compares the current page architecture to the expected page architecture and updates the appropriate components as long as the user input.

React is scalable. it utilises a single language, For server-client side, and mobile platform.

React is steady.React.js is completely adaptable, which means it seldom, if ever, updates the user interface. This enables legacy projects to be updated to the most new edition of React.js without having to change the codebase or make a few small changes.

React is adaptable. It can be conveniently paired with various state administrators (e.g., Redux, Flux, Alt or Reflux) and can be used to implement a number of architectural patterns.

Is there a market for React.js programmers?
The need for React.js developers is rising at an unparalleled rate. React.js is currently used by over one million websites around the world. React is used by Fortune 400+ businesses and popular companies such as Facebook, Twitter, Glassdoor and Cloudflare.

Final thoughts:

As you’ve seen, locating and Hire React js Developer and Hire React Native developer is a difficult challenge. You will have less challenges selecting the correct fit for your projects if you identify growing offshore locations (e.g. India) and take into consideration the details above.

If you want to make this process easier, You can visit our website for more, or else to write a email, we’ll help you to finding top rated React.js and React Native developers easier and with strives to create this operation

#hire-react-js-developer #hire-react-native-developer #react #react-native #react-js #hire-react-js-programmer

The Difference Between Regular Functions and Arrow Functions in JavaScript

Other then the syntactical differences. The main difference is the way the this keyword behaves? In an arrow function, the this keyword remains the same throughout the life-cycle of the function and is always bound to the value of this in the closest non-arrow parent function. Arrow functions can never be constructor functions so they can never be invoked with the new keyword. And they can never have duplicate named parameters like a regular function not using strict mode.

Here are a few code examples to show you some of the differences

this.name = "Bob";
const person = {

name: “Jon”,
<span style="color: #008000">// Regular function</span>
func1: <span style="color: #0000ff">function</span> () {
    console.log(<span style="color: #0000ff">this</span>);
},

<span style="color: #008000">// Arrow function</span>
func2: () =&gt; {
    console.log(<span style="color: #0000ff">this</span>);
}

}
person.func1(); // Call the Regular function

// Output: {name:“Jon”, func1:[Function: func1], func2:[Function: func2]}
person.func2(); // Call the Arrow function

// Output: {name:“Bob”}

The new keyword with an arrow function

const person = (name) => console.log("Your name is " + name);
const bob = new person("Bob");
// Uncaught TypeError: person is not a constructor

If you want to see a visual presentation on the differences, then you can see the video below:

#arrow functions #javascript #regular functions #arrow functions vs normal functions #difference between functions and arrow functions