React: Basic Introduction to Functional & Class Components
When learning to use the React library for JavaScript it can be tricky as a beginner. One of the main concepts that seemed difficult for me at first was the use of functional components and class components. Components are defined in the React documentation as a way to “let you split the UI into independent, reusable pieces, and think about each piece in isolation.” In essence, allowing each component to change and be updated within its scope and not affecting other components. It can help you make your application more manageable and easier to find errors by creating isolated pieces that you can target when something has gone wrong. At first, I found it difficult to differentiate what did what and why would you use one over the other as they have slight syntax differences and capabilities. I will try and make the differences and the application of each as simple as possible. (Full disclosure: this will not cover react hooks)
Functional Components are javascript functions that can be written as arrow functions or a regular function using the function keyword. They are stateless components and are mainly used for presentational purposes. This is one of the main differences between a functional component and a class components, their use of props and state.
Props and State are both JavaScript objects, one of their difference is that Props is passed to a component and can be used between both functional and class components, for example a parent to a child. As we mentioned before Functional components are stateless so that leaves us with class components in order to create and use state.
Class components allow us to use , props, state, and lifecycle methods. Setting state and lifecycle methods cannot be used within functions without hooks but that is a topic for another conversation, this is just about the basic differences. State is managed within the component and can only be used by class components. By having access to state and lifecycle methods in class components we can do more complex logic for example rendering and updating forms, or doing a fetch request within our components. It also allows us to store changing data and be able to dynamically use it between components.
One thing to keep in mind is certain syntax differences when using props between functional components and class components. In functional components you just use props and in class components you use the keyword this before calling props.
Another important syntax difference when using functional components as opposed to class components is how you define a function within. I know this may seem straightforward but I think jumping from javascript to react you just have to remember not to forget how javascript works. Within functions you can use functions that are defined as an arrow function or with the function keyword. When you are define a function within a class function you just define it by the name you are assigning it.
When deciding what type of component to use it depends on what you expect your component to do if it is going to just be presentational and wont’t be required to do much, for example a navigation bar which just points you in a certain direction, you would want to use a functional component. In the end it really is about how you are deciding to structure and design your components and code.
I know this is a basic introduction to what functional and class components are capable of doing. These are some of the main things that I personally struggled with and I think would be helpful to clear up for any other beginners to hopefully be on your way to understand the more complex ways of working with react components.
