Should I refactor my class components into functions?
Standoff between the two components.
A common question asked among all devlopers. Whether to use class based components or functional based components? So Lets shed some light onto this topic.
First a fall lets learn what is React JS and why is it so demanding in the market.
React JS is an open source JavaScript library that segments the DOM from the virtual DOM and brings an innovative approach to state management when building web applications. The logic is the same with React Native, but it’s more specific to building mobile applications. The main feature about react is its components based architechture where everything is build like LEGO BLOCKS stacked up each other from multiple small peices to a BIG application and the good thing about it IS that its completely reusable for future needs.
As we already learnt from the above statement that In, React everything is component based, It simply means we segment our UI into smaller individual and independent components and collectively put them together to build complex UIs.
There are mainly two types of components that React support they are:
- Class Based Components
- Functional Based Components
Class based components are implemented with syntax of simple ES6 Javascript Class, a state and a render method called in order to display some JSX (javascript extensions).
The above image the the visual representation of a Class based or a Stateful component.
In order to define a state we call a constructor and define a super() method which can accept props. The state is the data we want to display when rendering the component. The render method renders the UI, and it will display the JSX code or HTML in easy words.
Therender() is not user callable. It is part of the React component cycle and is called by React at various app stages, generally when the React component is first instantiated, or when there is a new update to the component state. Render does not take any arguments, and returns a JSX.Element which contains the view hierarchy of the current component. This view hierarchy will later be translated into HTML and displayed in the browser window.
The render() method returns a Javascript objects that maps to the DOM element. React keeps a lightweight representation of the DOM in memory, which we refer to as the Virtual DOM.
So, Whenever there is a change of state in our components React create a new elements with an updated state value. React will then compare this element in the virtual DOM with the actual DOM and update the real DOM to keep it in sync. This is the main reason why React is called “React”- it compares it with the Virtual DOM and the actual DOM
Talking about the functional components,
Functional components are literally simple JavaScript functions as shown above. The return function displays the UI code that is usually a JSX expression or raw HTML code. It is a valid React component because you can pass props into it.
This is how a functional component looks:
Functional components accept “props” as the only argument, so you can pass properties as props. But if you want to pass complex properties, you can achieve this by destructuring them.
We are passing props or attributes from the parent component to the child components in order to display the props in the UI. In this case we are passing name as the property from the parent to the child and to access to the access the variable we use the squiggly brackets ({props.<property-name>}).
In order to manage state in a functional components, React newer versions have the capability to add state to our functional components. By using the useState() Hook provided by react it consists of three main things:
- A state variable
- A function that updates the state
- An initial state variable which can be an empty string , null , boolean or an integer type of a value.
Class components have the following lifecycle methods.
componentDidMount()— This method is triggered right after a component is mounted. A perfect example would be to load data from an API fetch call to an archive page. This method is perfect for setting up any subscriptions, i.e., the initial state. However, this needs to be unsubscribed when the component is to be unmounted.componentDidUpdate()— This method is not called for the initial render. However, every time the component updates, and there is a change in state or props, this method is fired. The logic within this function must be wrapped within an if condition. This is where the updated props are compared with the previous props.componentWillUnmount()— This method is triggered right before the component is unmounted and destroyed. It clears any “junk,” such as invalidating timers, canceling network requests, or any subscriptions. Thus, avoiding memory leaks.
Functional components use the useEffect() hook to achieve this. Hooks are the new addition to React 16.8. The React useEffect() hook is similar to componentDidMount(), componentDidUpdate() and componentWillUnmount() combined.
So which one to use?
By looking at the syntax and understandable capacity it is obvious that functional components looks more demanding as compared to the class components. In which we have to call a Javascript class , render method , and a constructor call. So if your a person who likes to see clean code go for functional components. Functional components might be much easier to implement. And some may be biased with using class components and otherwise.
We dont really have to ,they’ll be supported for a long time , if not always. I believe in making optimum use of both to improve the efficiency of the code and application.
Gaining knowlege is the first step to wisdom. Sharing it is the first step to humanity.
Have fun! Enjoy coding! 🙂