Course Content
Expert React
Expert React
4. Formik
6. Next Steps
React Hooks
React Hook is a simple JavaScript function that we can use to isolate the reusable part from a functional component. Hooks can be stateful and can manage side effects.
Key concepts to remember
- useState Hook:
The
useState
hook adds state functionality to components. It allows us to declare and manage state variables within a component. By calling theuseState
hook, we can initialize a state variable and its corresponding setter function. Updating the state variable triggers a re-render of the component, reflecting the new state value. - useRef Hook:
The
useRef
hook creates mutable variables that persist across component renders. UnlikeuseState
, changes touseRef
variables do not trigger a re-render.useRef
access or store references to DOM elements, manage previous values, or preserve values between renders. - useEffect Hook:
The
useEffect
hook enables us to perform side effects in functional components. It allows us to handle tasks like data fetching, subscriptions, or interacting with the DOM. By specifying dependencies, we control when the effect runs, optimizing performance and preventing unnecessary re-renders. - useMemo Hook:
The
useMemo
hook enables the memoization of expensive calculations or computations. It takes a function and a dependencies array and returns a memoized value. The memoized value is only recomputed by providing a dependencies array when the dependencies change. This optimization significantly improves performance by avoiding unnecessary recalculations.
Example
Let's create the component Counter
to showcase how the useState
hook is used for managing state and how the useEffect
hook can be utilized to handle side effects and perform cleanup operations.
Code explanation:
- Line 1: We import the necessary dependencies from the React library. Specifically, we import the React object, the
useState
, anduseEffect
hooks. - Line 3: The code defines a React functional component named
Counter
. - Line 4: We use the
useState
hook to declare a state variable calledcount
and its corresponding setter functionsetCount
. The initial value ofcount
is set to0
. - Line 6-8: We utilize the
useEffect
hook to define a side effect. The effect function logs "Effect triggered!" to the console and will be triggered after every component render. The effect function has a dependency array[count]
, which means it will only run when thecount
value changes. - Line 10-12: We declare an
incrementCount
function to update thecount
state. It utilizes thesetCount
setter function provided by theuseState
hook. The function receives the previousprevCount
value and returns the updated count by incrementing it by 1. - Line 14-19: Return HTML elements. Mainly,
h1
displays the current value of thecount
state variable.button
hasonClick
event handler that triggers theincrementCount
function when clicked. - Line 22: The
Counter
component is exported as thedefault export
, allowing it to be imported and used in other application parts.
Complete code
Please, check the console to see the work of the useEffect
hook.
Challenge
Let's create a component responsible for filtering a list of items. The component renders a list of items and allows users to type into an input element to filter the list. Only the items that contain the inputted symbols should be displayed.
The task is:
- Import the necessary hooks from the react library.
- Set the initial value for the input element correctly.
- Specify the correct values for the dependency array in the
useEffect
hook.
Everything was clear?