Component Tree Structuring is crucial for React Developers especially when they need to deal with complex nested data. Recursion can also deliver same results as iterative component trees rendering. In certain specific cases Recursion become better choice than other methods to display their data.
In this article we will discuss the challenges and solutions in building of Recursive React Component.
What is Recursion?
Recursion is the process of solving a problem (or defining a problem) in terms of (a simpler version of) itself. This can be a very powerful tool in writing algorithms. Technically we can say that Recursion is solving a problem where the solution depends on solutions to smaller instances of the same problem.
Nesting dolls can be a parallel of Recursion
Factorial function is a good example of a problem with a recursive solution. Factorial of a number is successive multiplication of that number with a number less than one of that till we get one. 8! = 8*7*6*5*4*3*2*1. To calculate the Factorial we need to call the below written function itself again and again.
Let’s take a look at a factorial function in JavaScript and break down exactly what’s happening.
function factorial(n) {
// base case
if (n === 1) {
return 1;
}
// recursive call
return n * factorial(n – 1);
}
factorial(5); // 120
All recursive functions have base case and a recursive call as is in the above function. For your information Recursive Call is a call to function when function calls itself again and again. As is in factorial function, we’re returning the result of multiplying n by the result of calling factorial of n – 1. Similarly the Base Case is the final step in recursive chain where we are returning an actual value instead of another recursive function call. In our example of factorial function, the base case is when n is equal to 1.
This is a standard recursive function. Functions like this are commonly used in software all around the world.
This is a standard recursive function. Functions like this are commonly used in software all around the world.
Recursion in React
As we all know that React components are actually functions that return JSX. React components thus just like any other functions can be recursive. Below is the example for it.
function MyComponent({ prop1 })
{
return (
// base case
{prop1 !== 0 &&
// recursive call
return n * factorial(n – 1);
}
)
}
In the above example we have a recursive call and a base case in this function. The recursive call is when the component renders itself, passing in a modified version of the props it received. The base case is a conditional check to determine whether further rendering is required or not. The important point is base case should not be recursive to call itself indefinitely.
Main Challenges Developers faces with Recursion in React
The three distinctive challenges generally faced in recursive rendering of react component are as follow:
Managing Component’s state: The first challenge is managing the component’s state. A track of what’s the user is selecting is required specially when they are selecting nested sub options and if they continue to select the sub option’s further. The tracking of state become difficult if component renders itself again and again arbitrarily. The tracking though is not complicated in simple situation.
Change Notifications: The child component when is changed this must be notified to parent component. The other fact is when a component is recursively rendered; component’s children will be instances of itself thus component will essentially be interacting with a copy of itself. This fact must be kept in mind especially while designing props and callbacks.
Consistent Styling: The other challenge is keeping styling consistent. The component should look good and should responsively act even if it’s rendering itself. Therefore styles setting must be to avoid the nesting problem.
Case
In a front end application for an online pizza ordering app, selection of toppings on pizza can be an example of recursion.
In nested checkbox component, toppings are selected and in the same category more specific options are given to him/her i.e. one can choose chicken-buffalo-mild-cayenne. React should be able to display arbitrary number of options for each topping.
React Implementation
We can implement above component in React through several ways however recursive solution can be the best solution. The component can be implemented in the recursive way in the following manner.
Code for implementation for above component
HTML
SCSS
BABEL
If you are looking React in your application, We can help you with React consultation. Book your free consultation. We will evaluate, audit and share our recommendation at no cost.
