An introduction to useState and useEffect with sandbox examples.


Anyone who has written a class component in a large project knows that component life-cycle methods can get bloated. Code in componentDidMount and componentWillUnmount gets tangled amongst other blocks of unrelated code. Hooks provide a way to write modular and stateful components that is easy to test and reuse.

The learning curve for hooks is steep. To help with the transition, I’ll be focusing on useState and useEffect. As a consequence, the performance of your application won’t be ideal. However, wrapping your mind around hooks becomes a much simpler feat. …

and what are they?

Inputs are common in the world of React. You may have come across “Controlled” and “Uncontrolled” terms, looked them up, and still are not completely sure what they mean. No worries! I’m going to go over them as well as attempt to explain why they can be confusing.

Let’s start with the definition of an uncontrolled input;

Uncontrolled Component

An uncontrolled component is a component that does not manage the base input’s value.

This is the default behavior for the HTML input tag. You provide an onChange function to listen to changes and that is it. …

Chennan Mao

Just a front-end developer who occasionally has interesting thoughts.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store