Adam Daniels

Adam Daniels

1588040400

9 React Conditional Rendering Methods

Controlling the flow of your React application is crucial to getting the result that you are looking for. Learn more about React conditional rendering methods in this video.

Introduction – 00:00
if/else: the entire return value – 01:41
null: prevent rendering by returning null value – 03:43
element variables: storing JSX inside variables – 05:56
ternary operator: inline if/else – 06:57
short-circuit && operator: avoid in React Native – 09:14
IIFEs (immediately invoked function expressions) – 11:11
sub components – 13:24
If components – 14:44
Higher-Order Components (HOCs) – 17:41

GitHub repo: https://github.com/leighhalliday/react-conditionals-demo


JSX is a powerful extension to JavaScript that allows us to define UI components.

If you want to iterate over a list to render more than one component or implement some conditional logic, you have to use pure JavaScript. You don’t have a lot of options with looping, either. Most of the time, map will cover your needs.

But conditional expressions? That’s another story.

You’ve got options

There’s more than one way to use conditional expressions in React. And, as with most things in programming, some are better suited than others depending on the problem you’re trying to solve.

This tutorial covers the most popular conditional rendering methods:

  • If/else
  • Prevent rendering with null
  • Element variables
  • Ternary operator
  • Short-circuit AND operator (&&)
  • Immediately invoked function expressions (IIFEs)
  • Subcomponents
  • Higher-order components (HOCs)

As an example of how all these methods work, a component with a view/edit functionality will be implemented:

You can try and fork all the examples in JSFiddle.

Let’s start with the most naive implementation using an if/else block and build it from there.

If/else

Let’s create a component with the following state:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {text: '', inputText: '', mode:'view'};
  }
}

You’ll use one property for the saved text and another for the text that is being edited. A third property will indicate if you are in edit or view mode.

Next, add some methods for handling input text and the save and edit events:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {text: '', inputText: '', mode:'view'};
    
    this.handleChange = this.handleChange.bind(this);
    this.handleSave = this.handleSave.bind(this);
    this.handleEdit = this.handleEdit.bind(this);
  }
  
  handleChange(e) {
    this.setState({ inputText: e.target.value });
  }
  
  handleSave() {
    this.setState({text: this.state.inputText, mode: 'view'});
  }

  handleEdit() {
    this.setState({mode: 'edit'});
  }
}

Now, for the render method, check the mode state property to either render an edit button or a text input and a save button, in addition to the saved text:

class App extends React.Component {
  // …
  render () {
    if(this.state.mode === 'view') {
      return (
        <div>
          <p>Text: {this.state.text}</p>
          <button onClick={this.handleEdit}>
            Edit
          </button>
        </div>
      );
    } else {
      return (
        <div>
          <p>Text: {this.state.text}</p>
            <input
              onChange={this.handleChange}
              value={this.state.inputText}
            />
          <button onClick={this.handleSave}>
            Save
          </button>
        </div>
      );
    }
}

Here’s the complete Fiddle to try it out:

An if/else block is the easiest way to solve the problem, but I’m sure you know this is not a good implementation.

It works great for simple use cases, and every programmer knows how it works. But there’s a lot of repetition, and the render method looks crowded.

So let’s simplify it by extracting all the conditional logic to two render methods: one to render the input box and another to render the button:

class App extends React.Component {
  // …
  
  renderInputField() {
    if(this.state.mode === 'view') {
      return <div></div>;
    } else {
      return (
          <p>
            <input
              onChange={this.handleChange}
              value={this.state.inputText}
            />
          </p>
      );
    }
  }
  
  renderButton() {
    if(this.state.mode === 'view') {
      return (
          <button onClick={this.handleEdit}>
            Edit
          </button>
      );
    } else {
      return (
          <button onClick={this.handleSave}>
            Save
          </button>
      );
    }
  }

  render () {
    return (
      <div>
        <p>Text: {this.state.text}</p>
        {this.renderInputField()}
        {this.renderButton()}
      </div>
    );
  }
}

Here’s the complete Fiddle to try it out:

Notice that the method renderInputField returns an empty <div> element when the app is in view mode. This is not necessary, however.

Prevent rendering with null

If you want to hide a component, you can make its render method return null, so there’s no need to render an empty (and different) element as a placeholder. One important thing to keep in mind when returning null, however, is that even though the component doesn’t show up, its lifecycle methods are still fired.

Take, for example, the following Fiddle, which implements a counter with two components:

The Number component only renders the counter for even values; otherwise, null is returned. When you look at the console, however, you’ll see that componentDidUpdate is always called regardless of the value returned by render.

Back to our example, change the renderInputField method to look like this:

  renderInputField() {
    if(this.state.mode === 'view') {
      return null;
    } else {
      return (
          <p>
            <input
              onChange={this.handleChange}
              value={this.state.inputText}
            />
          </p>
      );
    }
  }

Here’s the complete Fiddle:

One advantage of returning null instead of an empty element is that you’ll improve the performance of your app a little bit because React won’t have to unmount the component to replace it.

For example, when trying the Fiddle that renders the empty <div> element, if you open the Inspector tab, you’ll see how the <div> element under the root is always updated:

Unlike the case when null is returned to hide the component, where that <div> element is not updated when the Edit button is clicked:

You can learn more here about how React updates the DOM elements and how the diffing algorithm works.

Maybe in this simple example, the performance improvement is insignificant, but when working when big components, there can be a difference. I’ll talk more about the performance implications of conditional rendering later. For now, let’s continue to improve this example.

Element variables

One thing I don’t like is having more than one return statement in methods, so I’m going to use a variable to store the JSX elements and only initialize it when the condition is true:

renderInputField() {
    let input;
    
    if(this.state.mode !== 'view') {
      input = 
        <p>
          <input
            onChange={this.handleChange}
            value={this.state.inputText} />
        </p>;
    }
      
      return input;
  }
  
  renderButton() {
    let button;
    
    if(this.state.mode === 'view') {
      button =
          <button onClick={this.handleEdit}>
            Edit
          </button>;
    } else {
      button =
          <button onClick={this.handleSave}>
            Save
          </button>;
    }
    
    return button;
  }

This gives the same result as returning null from those methods. Here’s the Fiddle to try it out:

The main render method is more readable this way, but maybe it isn’t necessary to use if/else blocks (or something like a switch statement) and secondary render methods. Let’s try a simpler approach.

Ternary operator

Instead of using an if/else block, we can use the ternary conditional operator:

condition ? expr_if_true : expr_if_false

The operator is wrapped in curly braces, and the expressions can contain JSX, optionally wrapped in parentheses to improve readability. It can also be applied in different parts of the component.

Let’s apply it to the example so you can see this in action. I’m going to remove renderInputField and renderButton, and in the render method, I’m going to add a variable to know if the component is in view or edit mode:

render () {
  const view = this.state.mode === 'view';

  return (
      <div>
      </div>
  );
}

Now you can use the ternary operator to return null if the view mode is set, or the input field otherwise:

  // ...

  return (
      <div>
        <p>Text: {this.state.text}</p>
        
        {
          view
          ? null
          : (
            <p>
              <input
                onChange={this.handleChange}
                value={this.state.inputText} />
            </p>
          )
        }

      </div>
  );

Using a ternary operator, you can declare one component to render either a save or edit button by changing its handler and label correspondingly:

  // ...

  return (
      <div>
        <p>Text: {this.state.text}</p>
        
        {
          ...
        }

        <button
          onClick={
            view 
              ? this.handleEdit 
              : this.handleSave
          } >
              {view ? 'Edit' : 'Save'}
        </button>

      </div>
  );

As mentioned before, this operator can be applied in different parts of the component. Here’s the Fiddle to try it out:

Short-circuit AND operator

The ternary operator has a special case where it can be simplified. When you want to render either something or nothing, you can only use the && operator. Unlike the & operator, && doesn’t evaluate the right-hand expression if evaluating only the left-hand expression can decide the final result.

For example, if the first expression evaluates to false (false && …), it’s not necessary to evaluate the next expression because the result will always be false.

In React, you can have expressions like the following:

return (
    <div>
        { showHeader && <Header /> }
    </div>
);

If showHeader evaluates to true, the <Header/> component will be returned by the expression. If showHeader evaluates to false, the <Header/> component will be ignored, and an empty <div> will be returned.

This way, the following expression:

{
  view
  ? null
  : (
    <p>
      <input
        onChange={this.handleChange}
        value={this.state.inputText} />
    </p>
  )
}

Can be turned into:

!view && (
  <p>
    <input
      onChange={this.handleChange}
      value={this.state.inputText} />
  </p>
)

Here’s the complete Fiddle:

Looks better, right?

However, the ternary operator doesn’t always look better. Consider a complex, nested set of conditions:

return (
  <div>
    { condition1
      ? <Component1 />
      : ( condition2
        ? <Component2 />
        : ( condition3
          ? <Component3 />
          : <Component 4 />
        )
      )
    }
  </div>
);

This can become a mess pretty quickly. For that reason, sometimes you might want to use other techniques, like immediately invoked functions.

Immediately invoked function expressions (IIFEs)

As the name implies, IIFEs are functions that are executed immediately after they are defined — there’s no need to call them explicitly.

Generally, this is how you define and execute (at a later point) a function:

function myFunction() {

// ...

}

myFunction();

But if you want to execute the function immediately after it is defined, you have to wrap the whole declaration in parentheses (to convert it to an expression) and execute it by adding two more parentheses (passing any arguments the function may take).

Either this way:

( function myFunction(/* arguments */) {
    // ...
}(/* arguments */) );

Or this way:

( function myFunction(/* arguments */) {
    // ...
} ) (/* arguments */);

Since the function won’t be called in any other place, you can drop the name:

( function (/* arguments */) {
    // ...
} ) (/* arguments */);

Or you can also use arrow functions:

( (/* arguments */) => {
    // ...
} ) (/* arguments */);

In React, you use curly braces to wrap an IIFE, put all the logic you want inside it (if/else, switch, ternary operators, etc.), and return whatever you want to render. For example, here’s how the logic to render the save/edit button could look with an IIFE:

{
  (() => {
    const handler = view 
                ? this.handleEdit 
                : this.handleSave;
    const label = view ? 'Edit' : 'Save';
          
    return (
      <button onClick={handler}>
        {label}
      </button>
    );
  })()
}

Here’s the complete Fiddle:

Subcomponents

Sometimes, an IFFE might seem like a hacky solution. After all, we’re using React — the recommended approaches are to split up the logic of your app into as many components as possible and to use functional programming instead of imperative programming.

So moving the conditional rendering logic to a subcomponent that renders different things based on its props would be a good option. But here, I’m going to do something a bit different to show you how you can go from an imperative solution to more declarative and functional solutions.

I’m going to start by creating a SaveComponent:

const SaveComponent = (props) => {
  return (
    <div>
      <p>
        <input
          onChange={props.handleChange}
          value={props.text}
        />
      </p>
      <button onClick={props.handleSave}>
        Save
      </button>
    </div>
  );
};

As properties, it receives everything it needs to work. In the same way, there’s an EditComponent:

const EditComponent = (props) => {
  return (
    <button onClick={props.handleEdit}>
      Edit
    </button>
  );
};

Now the render method can look like this:

render () {
    const view = this.state.mode === 'view';
    
    return (
      <div>
        <p>Text: {this.state.text}</p>
        
        {
          view
            ? <EditComponent handleEdit={this.handleEdit}  />
            : (
              <SaveComponent 
               handleChange={this.handleChange}
               handleSave={this.handleSave}
               text={this.state.inputText}
             />
            )
        } 
      </div>
    );
}

Here’s the complete Fiddle:

If components

There are libraries like jsx-control-statements that extend JSX to add conditional statements like:

<If condition={ true }>

<span>Hi!</span>

</If>

These libraries provide more advanced components, but if we need something like a simple if/else, we can use a solution similar to Michael J. Ryan’s in the comments for this issue:

const If = (props) => {
  const condition = props.condition || false;
  const positive = props.then || null;
  const negative = props.else || null;
  
  return condition ? positive : negative;
};

// …

render () {
    const view = this.state.mode === 'view';
    const editComponent = <EditComponent handleEdit={this.handleEdit}  />;
    const saveComponent = <SaveComponent 
               handleChange={this.handleChange}
               handleSave={this.handleSave}
               text={this.state.inputText}
             />;
    
    return (
      <div>
        <p>Text: {this.state.text}</p>
        <If
          condition={ view }
          then={ editComponent }
          else={ saveComponent }
        />
      </div>
    );
}

Here’s the complete Fiddle:

Higher-order components (HOCs)

A HOC is a function that takes an existing component and returns a new one with some added functionality:

const EnhancedComponent = higherOrderComponent(component);

Applied to conditional rendering, a HOC could return a different component than the one passed based on some condition:

function higherOrderComponent(Component) {
  return function EnhancedComponent(props) {
    if (condition) {
      return <AnotherComponent { ...props } />;
    }

    return <Component { ...props } />;
  };
}

There’s an excellent article about HOCs by Robin Wieruch that digs deeper into conditional renderings with higher-order components. For this article, I’m going to borrow the concepts of the EitherComponent.

In functional programming, the Either type is commonly used as a wrapper to return two different values. So let’s start by defining a function that takes two arguments, another function that will return a Boolean value (the result of the conditional evaluation), and the component that will be returned if that value is true:

function withEither(conditionalRenderingFn, EitherComponent) {

}

It’s a convention to start the name of the HOC with the word with. This function will return another function that will take the original component to return a new one:

function withEither(conditionalRenderingFn, EitherComponent) {
    return function buildNewComponent(Component) {

    }
}

The component (function) returned by this inner function will be the one you’ll use in your app, so it will take an object with all the properties that it will need to work:

function withEither(conditionalRenderingFn, EitherComponent) {
    return function buildNewComponent(Component) {
        return function FinalComponent(props) {

        }
    }
}

The inner functions have access to the outer functions’ parameters, so now, based on the value returned by the function conditionalRenderingFn, you either return the EitherComponent or the original Component:

function withEither(conditionalRenderingFn, EitherComponent) {
    return function buildNewComponent(Component) {
        return function FinalComponent(props) {
            return conditionalRenderingFn(props)
                ? <EitherComponent { ...props } />
                 : <Component { ...props } />;
        }
    }
}

Or, using arrow functions:

const withEither = (conditionalRenderingFn, EitherComponent) => (Component) => (props) =>
  conditionalRenderingFn(props)
    ? <EitherComponent { ...props } />
    : <Component { ...props } />;

This way, using the previously defined SaveComponent and EditComponent, you can create a withEditConditionalRendering HOC and, with this, create an EditSaveWithConditionalRendering component:

const isViewConditionFn = (props) => props.mode === 'view';

const withEditContionalRendering = withEither(isViewConditionFn, EditComponent);
const EditSaveWithConditionalRendering = withEditContionalRendering(SaveComponent);

You can now use it in the render method, passing all the properties needed:

render () {    
    return (
      <div>
        <p>Text: {this.state.text}</p>
        <EditSaveWithConditionalRendering 
               mode={this.state.mode}
               handleEdit={this.handleEdit}
               handleChange={this.handleChange}
               handleSave={this.handleSave}
               text={this.state.inputText}
             />
      </div>
    );
}

Here’s the complete Fiddle:

Performance considerations

Conditional rendering can be tricky. As I showed you before, the performance of each option can be different. However, most of the time, the differences don’t matter a lot.

But when they do, you’ll need a good understanding of how React works with the virtual DOM and a few tricks to optimizing performance. Here’s a good article about optimizing conditional rendering in React — I totally recommend you read it.

The essential idea is that changing the position of the components due to conditional rendering can cause a reflow that will unmount/mount the components of the app. Based on the example of the article, I created two JSFiddles.

The first one uses an if/else block to show/hide the SubHeader component:

The second one uses the short circuit operator (&&) to do the same:

Open the Inspector and click on the button a few times. You’ll see how the Content component is treated differently by each implementation.

Conclusion

As with many things in programming, there are many ways to implement conditional rendering in React. I’d say that, with exception of the first method (if/else with many returns), you’re free to choose whatever method you want.

You can decide which one is best for your situation based on:

  • Your programming style
  • How complex the conditional logic is
  • How comfortable you are with JavaScript, JSX, and advanced React concepts (like HOCs)

And, all things being equal, always favor simplicity and readability.

#reactjs #javascript #web-development

What is GEEK

Buddha Community

9 React Conditional Rendering Methods
Autumn  Blick

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

Mathew Rini

1615544450

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

Kaustav Hazra

1603479480

 Component Life Cycle in React

Every component in React goes through a lifecycle of events. You can think is of going through a cycle of birth, growth, and death the same as the picture below.

The phases are:

  • Initialization — Starting the journey of your component
  • Mounting — Birth of your component
  • Update — Growth of your component
  • Unmount — Death of your component

1. Initialization

This is the phase in which the component is going to start its journey. The developer has to define the props and initial state of the component. This is usually done inside the constructor method (see below to understand the initialization phase better).

#react #react-lifecycle-method #react-course #react-for-beginner #react-js-tutorials

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