What is a React Hook?

A React hook is a function that allows us to use React features in our functional components. They are especially useful because they enable functional components to have stateful logic, side effects and access to react features without needing class components. Knowing React hooks is essential for building modern React applications efficiently and effectively since they provide those powerful tools for managing state like we discussed.

Okay so what exactly is stateful logic?

When we talk about stateful logic, we are essentially referring to the behaviour of functionality in a program that relies on the current state of the application or component. (The word state implies that there are elements of the component that can change and the "state" is the current condition of those elements that have the ability to change). It involves managing and updating data based on changes in state.

Changes in state include:

• UI interactions

• Updating Data

• API Responses

• Other external factors

Why use react hooks ?

There are a bunch of advantages to using react hooks including for example: They are incredibly simple and most of all reusability. They reduce the need for class components and lifecycle methods. This makes code more concise and easier to understandm promoting reusability accross components.

Now that we have a fundamental idea of what we are working with, let's get busy with hooks !

The useState Hook

The useState Hook is a solution to the challenge of managing component state within functional components in React. The problem we have in react is that our functional component is not automatically rerendered every time a stateful data changes within the component. For example, when a user interacts with the UI causing a change in data, the component is not rerendered to display the updated data in the UI.

How exactly does useState address this problem?

useState is a function that allows us to track the variables containing stateful data as well as the code that is causing that change and rerenderes the functional component every time it picks up a change in state.

• useState()

Evey React Hook is a function. Now, this particular function useState is recieves a single argument that being the initial value of the stateful data.

• const [variable, setVariable] = useState(initial_value)

The function returns an array which we can destructure in the same line. The array contains:

1. The initial value of the stateful data.

2. The function responsible for changing the data.

The function commonly names setVariable is used to update the stateful data. When called with a new value, it triggeres a re-render of the component with the updated state.

This ensures the UI reflects the most recent state of the application. By encapsulating stateful logic within the useState hook, React promotes a more declarative and predictive approach to managing state in functional components, enhancing the overall development experience.

import React, { useState } from 'react';

function Counter() {
  // Define state variable 'count' and a function to update it 'setCount'
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

export default Counter;

---