React Hooks Part 1 State & Effect: Simplify Your React Components

Knowledge Base, React

Published: 29.01.2024

Introduced in version 16.8, React Hooks are a revolutionary addition to React that allows you to incorporate functionalities from Class-Based components into functional components. This first part of the blog focuses on key features like useEffect and useState.

Why were Hooks developed?

The introduction of Hooks addresses the complexity associated with classes in React. Classes often demand more code and can quickly become unwieldy in large applications. Grasping the 'this' concept, unnecessary binding of event handlers, and scattered logic within lifecycle methods can pose challenges when learning React with classes.

Hooks provide a streamlined approach, enabling the use of state and other React features without the need to write full classes. This enhances code readability and comprehension, particularly in larger projects.

What is a Hook?

A Hook is a special function that grants access to specific React functionalities. By using these functions, we can easily add state to functional components without the need to convert them into class-based components.

  • useState – Managing State in Functional Components

    If you want to use state in functional components, utilize the useState hook. This hook declares a state variable, as demonstrated in the example below where we name it "weather":

    import React, { useState } from 'react';
    const VoorbeeldComponent = () => {
      const [weather, setweather] = useState('Sunny');

    The useState hook returns two values: the current value of the state (weather) and the function to update the state (setWeather). Compared to class-based components, where we would use this.state = { weather: 'sunny'} in the constructor, this hook simplifies the process.

        import react, { useState } from ‘react’;
    const VbComponent = () => {
    const [weather, setWeather] = useState(‘Sunny’);
                <button onclick="”{()" ==""> setWeather(‘Raining’)}”>
                      update weather state
  • useEffect – Adding Side Effects to Your Component

    The useEffect hook allows the addition of side effects to your component, akin to the lifecycle methods in class-based components. This hook can be employed to fetch data, register event handlers, and make changes to the DOM.

    import React, { useEffect, useState } from 'react';
    const VoorbeeldUseEffect = () => {
      const [testState, setTestState] = useState([]);
      useEffect(() => {
        const helperFunctie = async () => {
          const response = await fetch('https://eenwebsite/waar/de/content/staat/die/we/willen');
      }, []);
      return (
    Some JSX
    ); }

Read some of our blogs down here!

Expand your knowledge with the 4BIS Blog...

WordPress and Plugins – A world that opens up for you!

WordPress, Web development, Ecommerce / Webshop, Knowledge Base, WooCommerce

With plugins you can expand the functionality of WordPress or add completely new functions to WordPress. You can make plugins yourself, provided you know PHP, or you can download them.

Read more

Unveiling Where Innovation Meets Ingenuity

SEO / SEA, Software Modernisation, Web development, PHP, Symfony, Digital Marketing

In the bustling realm of technology, staying updated is not just a necessity but a lifestyle. With an overflow of information bombarding us daily, having a reliable source to curate and present the latest tech news becomes invaluable. Enter,...

Read more

HR software: This is how you automate Human Resource Management

Business software, Software Modernisation, Web development, Automate

HRM, also known as Human Resource Management, is an important part for every company. Especially if you have many employees, an HR department is indispensable. However, it is not necessary to have a huge HR department. Much can be automated using HR...

Read more

And what can we do for you?_

Do you want to know more or are you interested? Please feel free to contact us directly, by phone or via mail.
Or use one of our contact forms so that we can answer you as quickly and appropriately as possible can give. We would love to hear from you!

back to top