Today we're covering transitioning from class to function components.
The junior code
Below is the component that we're going to refactor. Here is a link to an interactive version.
Below is the refactored version of the same code.
Click here for a live version.
The senior code
Transitioning from class to function components
There are 2 ways to create a React component: use a function or use a class.
Early on in React, the best practice was to use a function component whenever possible. Function components had 3 advantages over class components:
When function components are compiled using Babel, they are smaller. This decreases your bundle size and improves the performance of your app, especially the initial load time (source)
Function components are easier to read, understand, and work with. They are just simple functions. Simpler code is just generally better.
A function component made clear that it was stateless. A key design principle of building React apps is that you distinguish between presentational and stateful components. In a nutshell, presentational components handle appearance. Stateful components handle the state. In practice, it's hard to maintain this distinction. Stateful components often end up having some styling too. But the more you can maintain this distinction, the easier it is to change the appearance of your app. You can swap out presentational components and not have to worry about how all your state logic will be impacted. It used to be impossible to have an internal state in function components, which guaranteed that it was presentational. In programming, like in life, guarantees make your life easier.
If you needed to add a state or you needed lifecycle hooks, you would use a class component. If you've worked with React, you've almost certainly seen lifecycle hooks in class components. They are the methods that are named things like componentWillMount and componentDidMount. They are how you manage updates to the component at different points in the component's lifecycle. For instance, componentWillMount executes before the component renders and componentDidMountexecutes after the component renders.
Until React version 16.8 (released February 2019) you could only use lifecycle hooks inside a class component because they are methods on the component class that comes with React. Therefore, if you needed to use them, you needed to "extend" the React component class to create your component. (If this stuff about classes and extending them doesn't make sense, you should probably read up on object-oriented programming. This is essential programming knowledge. Here is a good place to start).
However, this whole function v. class component situation is kind of irrelevant since hooks were introduced. Hooks allow you to have an internal state and give you lifecycle hooks inside of function components. In other words, everything you used to only be able to do in class components you can now do in function components.
So is there even a point to class components anymore? Sure. You can still use them. The official React has said that, "there are no plans to remove classes from React." We would suggest trying hooks out and seeing how you like them. They seem like the future of React, but right now it's hard to say for sure.
Hooks are powerful and they do several different things. Covering them thoroughly would take a couple of blog posts. Here we're just going to cover one of the most-commonly used flavors of hooks: state hooks. Below is one of the state hooks we use in the new code:
const [urls, setUrls] = useState([]);
The useState function gives you 2 things: An array called urls that is part of the component's state. To use urls, just use it. No more of that this.state.urls stuff. The second thing you get is a function called setUrls. You use that function to update urls.
It's that simple to get started with hooks. We also introduce another kind of hook called an effect hook in the aptly named useEffect function. We'll let you explore that further on your own if you're interested.
Top comments (0)