React Hooks : Understanding useState and useEffect with simple practical examples

Understand the most commonly used react hooks in a simple and practical way

React hooks are built in functions that are used with functional components that allow React developers to manage the state of the variable and lifecycle methods. Our focus for this blog will be to understand and implement two of the most common hooks used in react i.e useState and useEffect.

Hooks has to follow certain rules:

1. React hook should not be written inside loops, conditions, nested functions.
2. Hooks can only be used inside a react function.

useState Hook:

The useState() hook is used to set/update, manipulate the state/value of a particular variable inside a functional component. In simple terms when a certain value can be updated multiple times and has to be retain its updated value at global level i.e throughout the functional component , then in this case we can use useState hook.

Syntax to declare useState() hook is:

const [variableName1, setVariableName2] = useState(<initial_value>);

The two variables in array can be named as per our choice, first parameter in array is a variable that stores the <initial_value> that we pass as argument to useState() function and setVariableName2 is a function variable that is use to update/set the state value, using set before that actual state name for second variable is a standard that is followed by react developers.

We will quickly implement a useState hook, we will write a useState hook to store the marks of a student and display the same.

We changes the App.js file as below:

We have imported useState from react, then inside the function we have declared and initialised useState on line no. 5, then we have used react JSX to create an input and an onChange event to set the marks using setMarks function of useState to set the marks to the value that we enter in input field and display the marks that we enter below the input field.

See how we can display the marks that we set by using setState function of useState() in react JSX, every time we change the marks in the input field onChange event is called and setState updates the marks value to the latest one.

useEffect Hook:

useEffect() is a function that is used to execute certain logic in effect of a certain value or state of a variable been changed. useEffect by default execute after render has been completed but we have option to control when we would like useEffect() to run, there are three cases when we can make our useEffect function to execute.

1. execute after render has been completed — by default
2. execute when state of a certain variable is changed — we need to pass the variable name that would trigger useEffect function as parameter
3. execute every time when state of any of the variable is changed — pass a blank array as parameter

We will extend our current example to demonstrate useEffect hook, suppose you want to show the whether the student is Pass or Fail based on marks entered in input field then we can make will declare a useEffect hook and pass marks as parameter to the useEffect hook because we want useEffect to trigger when the marks as changed to set the result as Pass or Fail. See example below

useEffect hook to setResult based on marks

We have imported useEffect hook from react and declared a new state on line 7 inside the function to store the result of the student. We then implement useEffect function, notice how we have passed marks inside array as an argument in useEffect functions to trigger useEffect only when the marks change and called getResult function to set the result as Pass if marks is greater than 35 and fail if it is less than 35 using setResult function, then we have simply displayed the result in react JSX. Now try running the app and enter marks less than 35 , result will be displayed as Fail and when marks entered is greater than 35 result will be Pass

You can checkout the code from My Git Repository here: https://github.com/RaheelShaikh/react-hooks

Hope This helped you understand useState and useEffect Hooks, If you liked the blog give some claps👏 below and share with your friends!!