React Functional Components: Mastering State Changes

Mastering State in React Functional Components

React’s functional components have gained popularity due to their simplicity and ease of use. However, managing state in these components can be a challenge. In this article, we’ll explore the world of React functional components, and learn how to add state using hooks. We’ll also dive into testing these components using Jest and Enzyme.

The Two Types of Components

React offers two types of components: functional and class. Functional components are equivalent to JavaScript functions, while class components correspond to JavaScript classes. Functional components are simpler because they are stateless, and React encourages their use.

Adding State to Functional Components

If you choose to use class components, managing state is straightforward. However, if you opt for functional components, you’ll need to use hooks to add state. Let’s say you need to add state to a functional component. You can use the useState hook to achieve this.

Comparing Functional and Class Components

Here’s a comparison between a functional component with the useState hook and a class component with built-in state:

Functional Component:
“`
const Counter = () => {
const [count, setCount] = useState(0);

return (

);
};
“`

Class Component:
“`
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}

render() {
return (

);
}
}
“`

Testing Functional Components with Jest and Enzyme

Let’s create a demo component that changes the font size when you press a button. We’ll use Jest and Enzyme to test this component.

Building the Demo Component

In the App.js file, add the following code:
“`
import React, { useState } from ‘eact’;

const App = () => {
const [fontSize, setFontSize] = useState(14);

const handleClick = (size) => {
setFontSize(size);
};

return (

);
};

export default App;
“`

Adding Jest and Enzyme to the Project

Before writing the tests, let’s clarify why we need both of these tools. Jest is a fully featured testing framework, while Enzyme provides APIs to examine components and return a failure or passed response.

Writing the Tests

Let’s create a single test file where we’ll add our configurations. We’ll use Enzyme and Jest together to keep tests simpler.

“`
import React from ‘eact’;
import { shallow } from ‘enzyme’;
import App from ‘./App’;

describe(‘App component’, () => {
it(‘renders correctly’, () => {
const wrapper = shallow();
expect(wrapper).toMatchSnapshot();
});

it(‘includes two paragraphs’, () => {
const wrapper = shallow();
expect(wrapper.find(‘p’).length).toBe(2);
});

it(‘changes font size on click’, () => {
const changeSize = jest.fn();
const wrapper = shallow();
wrapper.find(‘#para1’).simulate(‘click’);
expect(changeSize).toHaveBeenCalledTimes(1);
});
});
“`

Get Started with LogRocket

LogRocket is a powerful tool for tracking errors and performance issues in your React application. With LogRocket, you can easily set up modern error tracking in minutes. Visit LogRocket’s website to get started today!