React 101 — Basic Understanding of Hooks, Part One

What are Hooks?

Hooks are an important feature in React for implementing component logic. They can be used to manage state, define side effects, and allow developers to create custom hooks.

Hooks draw inspiration from functional programming but come with some usage restrictions. To understand what Hooks are, we can look at the concepts of pure functions and side effects in functional programming.

Pure Functions

A function can be considered a pure function if it meets the following criteria:

Deterministic Output

• Consistency: The function always returns the same result given the same set of input parameters, regardless of how many times it is called.
• Independence: The function’s output is not influenced by external states or IO operations.

No Side Effects

• Immutability: The function does not modify the input parameters or any external state.
• No External Interactions: The function does not perform any IO operations (e.g., reading/writing files, network requests).
• Isolation: The function does not call other functions that produce side effects.