React Component Composition - Why does it matter?

Brenden Olding — Sun, 08 Oct 2023 04:24:51 +0000

In React there are a lot of flashy tools (hooks) that can do a lot of things for you. useContext() has seen a lot of love as a way to avoid 'prop drilling', but what if I told you there was another way?

If you are simply trying to avoid 'prop drilling' in React there is an incredible prop you can use to avoid that. The children prop is under used, but incredibly powerful.

Children Prop - What is it?

The children prop is almost self-explanatory. You use the prop in your component as such:

const Home = ({children}) => {
    return (
    <div>
        <h1>Welcome to My Blog</h1>
        {children}
    </div>
    )
}

It may not seem like it is doing much in this instance, but it can open up a world of opportunities to avoid that pesky 'prop drilling'. In this example Home component, you can display nested components inside the Home component and go multiple layers deep without passing props through each layer. Say you have a component 3 nested components deep; you can pass the children component to each of the 'parent' components and render each nested component as a child of the 'parent'. Here is what your App component could look like that in this instance:

const App = () = {
return (
  <div>
   <Home>
    <Component1>
     <Component2>                                                
      <DeepestComponent neededProps={/*whatever                      
      variables, functions, or state you need*/} />
     </Component2>
    </Component1>
   </Home>
  </div>
)
}

In this example instead of rendering Component1 inside the Home component, and Component 2 inside Component1, and the DeepestComponent inside of Component2, you render the children prop inside each parent and use composition to your advantage. So, in this example you can avoid props drilling from App all the way down through Home, Component1, Component2, and finally the component that needs it, DeepestComponent. Instead, you just pass the props straight to the DeepestComponent from the App Component.

There are of course drawbacks to this method, like "What if I need to pass props from Component1 to DeepestComponent?" or any other issues where state is necessary at multiple levels. In these cases, use useContext(), but if you aren't encountering an issue like that, you can use Component composition to your advantage.

Sources Referenced:

Using Composition in React to Avoid "Prop Drilling"
Flatiron School Curriculum on React Context and Children Props

JavaScipt Classes, What Are They?

Brenden Olding — Sun, 16 Jul 2023 04:38:51 +0000

Let's start with what a class is in JavaScript. A class is a function that allows you to create similar objects that adhere to the same structure.

Classes can be a really helpful tool in JavaScript. Here are a few examples of scenarios to consider using JavaScript classes.

You need to create multiple objects that will hold similar data, ex. a website comment, a website user, etc.
If you need to create functions to act on the data stored in similar objects, you can create methods on the class.
You have a set of functions that will do similar things.
This would act similarly to how the global Math object works. You would call the methods on the class itself.
You want to organize your code to remove potentially redundant code.

How to Create a Class.

There are two ways you can define a class, a class declaration and a class expression. Unlike functions, using a class declaration acts more akin to variable declarations/expressions using const and let. In simpler terms, a class does not get "hoisted" like a function using the function keyword.

You will use the built in constructor method to create the object key:value pairs. You pass parameters into the constructor method that represent the data you want to be stored. You then use the this keyword to refer to the object you will be creating, with each instance of the class, and create your keys using dot notation.

Below is an example of how you might create a user class for your program, with an example of both a declaration and expression.

// Class Declaration
class User {
   constructor(name, age, city) {
      this.name: name,
      this.age: age,
      this.city: city
   }
}

//Class Expression
const User = class {
   constructor(name, age, city) {
      this.name: name,
      this.age: age,
      this.city: city
   }
}

How to Create and Use Class Methods.

Now you might be wondering how you create a method that acts on the date stored in an instance of a class.

You would write the method outside of the constructor method in the class. The syntax is similar to creating a function with the function keyword. The only difference is you omit the function keyword in a class.

class User {
   constructor(name, age, city) {
      this.name: name,
      this.age: age,
      this.city: city
   }

   //below is the class method
   sayHello () {
   console.log(`Hello ${this.name}, welcome to the site!`)
   }
}
/* If you want to invoke the method above, you have to create an instance of the class. */

const david = new User('David', 27, 'Chicago')

/* Using the variable representing the new User instance, you use dot notation to access the method. */

david.sayHello();
//=> 'Hello David, welcome to the site!'

If you wanted to create a class that was only built in methods, you wouldn't need to create new instances of the class. Instead, you would call the methods on the class itself. This is typically used to create math functions that are not in the global Math object. You can get creative and use it for other things as well.

In summary, classes are a powerful tool in JavaScript. They enable you to have an Object Oriented Programming mindset, focusing your code around cells of data rather than isolated bits of data. It can add structure and organization to your code. It can create easy ways for you to interact with an object's data. It also helps keep relevant data together.

Classes are an incredible tool to keep in your programming toolbox.

Referenced Resources:
MDN- Classes - JavaScript
W3Schools - JavaScript Classes
Flatiron School's Curriculum on Classes and OOP

Forem: Brenden Olding

React Component Composition - Why does it matter?

Children Prop - What is it?

JavaScipt Classes, What Are They?

How to Create a Class.

How to Create and Use Class Methods.