DEV Community: Zoe for dummies

State in React for dummies

Zoe for dummies — Fri, 06 Aug 2021 09:42:08 +0000

Well, things can become really complicated in React and there's no reason for that. At least, as a beginner, you should be able to understand States without falling asleep 💤 💤 by counting a dozen technical slangs.

So a State is an object, just like props.

Note: You might want to check state vs. props and it may drive you crazy 😵‍💫, so just think that the use of state results in significant performance improvements in larger apps. We need State. Now relax.🛀

To use a state you need to import the useState, like this:

import React, { useState } from "react";

State is wonderful to work with; it returns the state value and the function to update that value.

const [item, updateItem] = useState(""); // item=""

You can use updateItem("hello!") to update item. Let's see a real world example with a form component:

import React, { useState } from "react";

function AddItemForm() {
  const [item, updateItem] = useState("");

  const valueChangeHandler = (e) => {
    updateItem(e.target.value);
  };

  return (
    <div>
      <form>
        <div className="field">
          <label className="label">Title</label>
          <div className="control">
            <input
              onChange={valueChangeHandler}
              value={item}
              className="input"
              type="text"
              placeholder="Title"
            ></input>
// and so on

So, we have a form. We introduce a state value (item="") and every time the user inputs something on the input field, we update the item value using the updateItem function. Notice that we make sure that value={item}, so with every onChange event, the value of the input is updated. You could use the item in any other place ofcourse.

I think that was fairly simple, right? :)

Now, States are used to chain updates, so it is important to understand that you can submit the form and pass data with the onSubmit event to the App (or any other component).

To do this, you need to add props to the component like this:

function AddItemForm(props) {
  const [item, updateItem] = useState("");

Then you need to create a function to use for the onSubmit event:

const submitHandler = (e) => {
    e.preventDefault(); // so that page will not reload
    props.onSubmitData(item); //item *goes up* to the App :)
  };

You will call the submitHandler like this on your form component:

<form onSubmit={submitHandler}>

Now you need to perform some changes on the App as well. The above example will only work if a onSubmitData prop has been defined for the form component in the App, like this:

return (
<AddItemForm onSubmitData={getFormData} /> //AddItemForm is the form component
//and so on

Last, you need to pass the form data from the form component to the App using a function:

const getFormData = (someData) => {
    console.log(someData); // someData will return the value of item
  };

We passed a form input value (item) from one component to another. Lovely! 💕

Hooks in React: What if I told you...

Zoe for dummies — Thu, 05 Aug 2021 17:30:20 +0000

Hooks do not update their value after 'set value' call until a component is rerendered. Supercharged useState by Hookstate (hookstate.js.org) library gives you immediate value update and whole lot more features.

My reaction:

Composition in React for dummies

Zoe for dummies — Thu, 05 Aug 2021 12:02:01 +0000

After a couple of decades 👩‍💻, I've come to the conclusion that programming is like doing Math and Sociology: There's too much structure and some of it does not make any sense at all.😁🤯

Drawing from my Sociology classes, Durkheim's notion that "the whole is greater than the sum of its parts" somehow fits the idea of composition in React. Composition is the act of combining parts to form a whole. Now, in Algebra (here comes the Math part 😀), given two functions, composition is applying the function f 🍞 to the output of function g 🥪 (while stating that both f and g don't know that the other function exists, that is). Although this is a very important concept, I will not discuss this here, because it might make you fall asleep if you think a lot about it...😴.

Back to React, to make components trully reusable🚀 and configurable🚀, the 'props' concepts is used to pass data from one component to the other. It is important that a component's property values are not set within the component itself. I mean think about it, if you were to set the component's property values within the component, then this would always return the same result for the same arguments. But we want to reuse this component so we need to be able to set 'props' as we see fit.

All react components must act like pure functions with respect to their properties ('props').

In the following function TabsMenuItem, props is the object that holds all the properties. These properties are set, not in the TabsMenuItem component but in the component that imports the TabsMenuItem (e.g., the App). Note that props can have any other name, it doesn't have to be props.

So, here's an example of a TabsMenuItem component:

function TabsMenuItem(props) {
  return (
    <div>
      <p className="panel-tabs">
        <a className="is-active">{props.tabMenuItem1}</a>
        <a>{props.tabMenuItem2}</a>
      //and so on

And then, this is how its properties are defined in the App:

function App() {
  return (
          <TabsMenuItem
            tabMenuItem1="First tab label"
            tabMenuItem2="Second tab label"
//and so on

Perfect!👌 Now, time to introduce the composition concept or, in other words, the children 🧸!

The children-parent relationship happens when we want to introduce a parent; for instance, if I would like to wrap the TabsMenuItem component (the children) in a PanelItem component (the parent).

function PanelItem(props) {
  return (
    <div>
      <article className="panel is-primary">
        {props.children}
      </article>
    </div>
  );
}

The above will not work, unless I put the children where I want them to be, using the infamous props.children. Notice that props holds the object of the children.

Of course, I have to import the PanelItem to the TabsMenuItem component and then insert PanelItem like this:

function TabsMenuItem(props) {
  return (
    <div>
      <PanelItem>

      <p className="panel-tabs">
        <a className="is-active">{props.tabMenuItem1}</a>
       //and so on

      </PanelItem>

Inheritance is about the relationship of an ancestor and a descendant whereas composition is about a parent and their child.

I think with this example Composition actually makes sense to any person starting with React. 😊 Let me know what you think! Good luck with your programming efforts!