React Native — Anti pattern while calling Component (ERROR, Solution & analysis)

Use React way instead of Functional way of calling a Component.

Basically, there are two ways of calling a Component inside your JSX code. They are:

1. Functional way &
2. React way.

Suppose you have a component named as “SoccerCard”. You can reuse this “SoccerCard” component in different screens in your React Native App.

Let’s see the “SoccerCard” component looks like below:

Now, there is a screen Home.js from where you will access that “SoccerCard” component.

Functional Way

Now we will use functional way of calling a React Component SoccerCardfrom Home.js screen.

React way

Now we will use React way of calling a React Component “SoccerCard” from Home.js screen.

Functional or React way?

So now it is very important to know, which one should we use? Each one has its own pros and cons.

Let me explain the difference between the two ways Functional & React way.

Functional Way

The first way is to call the “SoccerCard” component as a function and pass the data as an argument.

This way is simple and straightforward, but it has some drawbacks:

• It does not follow the JSX syntax, which is the recommended way to use React components. JSX allows you to write HTML-like code in JavaScript and makes it easier to read and understand.
• It does not take advantage of React props system, which is a way to pass data from a parent component to a child component. Props are like attributes that you can use to customize your components and make them reusable.
• It does not allow you to use React hooks inside “SoccerCard” component, which are a way to add state and lifecycle methods to functional components. Hooks let you use more of React’s features without classes.

React Way

The second way is to use the “SoccerCard” component as a JSX element and pass the data as a prop.

This way is more consistent with the React best practices and has some benefits:

• It follows the JSX syntax, which makes your code look cleaner and more expressive.
• It uses props to pass data from a parent component to a child component. Props are a powerful way to communicate between components and make them more flexible and modular.
• It allows you to use React hooks inside the “SoccerCard” component, which gives you access to state and lifecycle methods. Hooks let you add more functionality and logic to your components.

? Now you can decide which one you should use. ?

Still confused? Let’s understand why you must have to use React Way instead of Functional way.

Functional way creates silent ERROR! ??♂?

Let’s once again see the code of functional way of calling a component “SoccerCard” from your “Home.js” screen.

When you will run your App & load screen “Home.js” using the above functional way of calling component “SoccerCard”, you will see a silent ERROR like below in your metro:

Analysis the ERROR

So, why the ERROR occurred?

Answer: ERROR occurred as functional way of calling a component always creates a custom hook. Which means React understand that you created a custom hook “SoccerCard” & now you are calling that hook.

Ok, I got it that React understood that I created Custom hook “SoccerCard” & then called the Custom hook! But why that error like “React has detected a change in the order of Hooks called by Home” printed in metro!

This is because I called the custom Hook “SoccerCard” from JSX code & it violates the rule of Hooks of React.

Functions whose names start with use are called Hooks in React.

Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns. You can only call Hooks while React is rendering a function component:

• ? Call them at the top level in the body of a function component.
• ? Call them at the top level in the body of a custom Hook.

It’s not supported to call Hooks (functions starting with use) in any other cases, for example:

• ?? Do not call Hooks inside conditions or loops.
• ?? Do not call Hooks after a conditional return statement.
• ?? Do not call Hooks in event handlers.
• ?? Do not call Hooks in class components.
• ?? Do not call Hooks inside functions passed to useMemo, useReducer, or useEffect.

Solution

The solution is just always following the best practices given by React & React Native team. For this one use React wayinstead of Functional way: