DEV Community: Serge Jabo Byusa

React useRef Hook simple example

Serge Jabo Byusa — Wed, 08 Jun 2022 17:40:41 +0000

React useRef Hook

The useRef Hook is used to persist values between renders.
It does not cause a re-render when updated and can be used to store a mutable value, it also used to access a DOM element directly.

Below, is an example of useRef to keep the previous value of your state (name) after changing it.

import React, { useState, useEffect, useRef } from 'react';

export default function App(){
  const [name, setName] = useState('')
  const prevName = useRef()

  useEffect(()=> {
    prevName.current = name
  },[name])

  return (
     <>
       <input value={name} onChange={e => setName(e.target.value)}/>
      <div> My name is {name} and it used to be {prevName.current}</div>

     <>
   )
}

Ref:

Applicable React Redux example step by step from scratch

Serge Jabo Byusa — Sun, 28 Nov 2021 02:49:05 +0000

A simple example of React Redux

Step 0: Create a react app and install redux

npx create-react-app reactapp
cd reactapp
yarn add react-redux

Step 1: Create actions

ACTIONS -> INCREMENT (describes what you want to do!) it's a simple function
In src create a folder name it actions and add file named index.js

src/actions/index.js

export const increment = (number) => {
    return {
        type: "INCREMENT",
        payload: number,
    };
};

export const decrement = () => {
    return {
        type: "DECREMENT",
    };
};

Step 2: Create reducers

REDUCERS -> here an action transfer from one state to another state, it gonna modify our store.
You can have many reducers (Authentication reducer, Movielist reducer etc ...)

Create a folder called reducers
inside reducers create counter.js file

src/reducers/counter.js

const counterReducer = (state = 0, action) => {
    switch (action.type) {
        case "INCREMENT":
            return state + action.payload;
        case "DECREMENT":
            return state - 1;
        default:
            return state;
    }
};

export default counterReducer;

inside reducers create a second reducer named isLogged.js file.

src/reducers/isLogged.js

const loggedReducer = (state = false, action) => {
    switch (action.type) {
        case "SIGN_IN":
            return !state;
        default:
            return state;
    }
};

export default loggedReducer;

inside reducers create a index file to export them.

src/reducers/index.js

import counterReducer from "./counter";
import loggedReducer from "./isLogged";
import { combineReducers } from "redux";

const allReducers = combineReducers({
    //you can name it anything
    //counterReducer (this means counterReducer:counterReducer )
    counter: counterReducer,
    isLogged: loggedReducer,
});

export default allReducers;

Step 3: Create your Store

Store -> You can add your store in app.js.
You can only have one store

src/app.js

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "./actions";

function App() {
    const counter = useSelector((state) => state.counter);
    const isLogged = useSelector((state) => state.isLogged);
    const dispatch = useDispatch();

    return (
        <div className="App">
            <h1>Counter {counter} </h1>
            <button onClick={() => dispatch(increment(5))}>+</button>
            <button onClick={() => dispatch(decrement())}> -</button>
            {isLogged ? <h3>Valuable Information I shouldn't see</h3> : ""}
        </div>
    );
}

export default App;

Testing it
Option 1: check the console in inspect to see how it increments and decrements.
Option.
Option 2: Install Redux Devtool chrome extension.
https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en

Github repo:
https://github.com/Byusa/learn-redux

Reference:
https://react-redux.js.org/
https://redux.js.org/tutorials/fundamentals/part-5-ui-react
https://www.youtube.com/watch?v=CVpUuw9XSjY

Understand React Redux from scrach on one page

Serge Jabo Byusa — Thu, 25 Nov 2021 21:21:16 +0000

Redux a popular React and React Native state management library.
Here is all component of redux in one page

npx create-react-app reactapp

cd reactapp

yarn add react-redux

Add this in index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { createStore } from "redux";
import allReducer from "./reducers";

//ACTION  -> INCREMENT (describes what you want to do!) it's a simple function

const increment = () => {
    return {
        type: "INCREMENT",
    };
};

const decrement = () => {
    return {
        type: "DECREMENT",
    };
};

//REDUCER -> (action transfer from one state to another state, it gonna modify our store)
//You can have many reducers (Auth reducer, Movielist reducer etc ...)
const counter = (state = 0, action) => {
    switch (action.type) {
        case "INCREMENT":
            return state + 1;
        case "DECREMENT":
            return state - 1;
    }
};

//STORE  -> Globalized STATE
let store = createStore(counter);

//Display it in the console.
store.subscribe(() => console.log(store.getState()));

//DISPATCH (DISPATTCH this action to the reducer)
store.dispatch(increment());
store.dispatch(decrement());
store.dispatch(increment());

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById("root")
);

reportWebVitals();

Testing it: check the console in inspect to see how it increments and decrements.

Github Repo For more advanced way of doing it:
https://github.com/Byusa/learn-redux

This repo shows the use of redux it could be one a proper way with the store and multiple reducers their own folders.

Reference:
https://www.youtube.com/watch?v=CVpUuw9XSjY

Working with Ref in React

Serge Jabo Byusa — Tue, 05 Oct 2021 01:22:54 +0000

When you need to only read a value but no need to change it just use Refs (better than State in this case) But in general rarely use Refs, just use useState 

Step 1
import useRef from react

import React, {useRef } from 'react';

Step 2

inside the method, set the values of refs

const enteredUsername1 = nameInputRef.current.value;
const enteredUserAge1 = ageInputRef.current.value;

Step 3
use the ref

 ref={nameInputRef}

Example of full code

import React, {useRef } from 'react';

import Card from '../UI/Card';
import classes from './AddUser.module.css';

const AddUser = (props) => {
  const nameInputRef = useRef();
  const ageInputRef = useRef();

  const addUserHandler = (event) => {
    event.preventDefault();

    const enteredUsername1 = nameInputRef.current.value;
    const enteredUserAge1 = ageInputRef.current.value; 

    props.onAddUser(enteredUsername1, enteredUserAge1);

   //in case you want to set your ref to null
    nameInputRef.current.value = ''
    ageInputRef.current.value = ''
  };


  return (
    <div>
      <Card className={classes.input}>
        <form onSubmit={addUserHandler}>
          <label htmlFor="username">Username</label>
          <input
            id="username"
            type="text"
            ref={nameInputRef}
          />
          <label htmlFor="age">Age (Years)</label>
          <input
            id="age"
            type="number"
            ref={ageInputRef}
          />
          <button type="submit">Add User</button>
        </form>
      </Card>
      </div>
  );
};

export default AddUser;

NB: Using Ref makes the inputs to be uncontrolled components (value in them is not controlled by react)

The Use of Portals in React

Serge Jabo Byusa — Tue, 05 Oct 2021 00:16:38 +0000

Getting a cleaner DOM with Portals

Step 1
Got inside public/index.html and add
the roots near the

<div id="backdrop-root"></div>
<div id="overlay-root"></div>

Step 2
Then import MyReactDOM from 'react-dom'
Fell free to name anything you want. I named it MyReactDOM in this example

import MyReactDOM from 'react-dom'

Step 3
Create methods that returns jsx to be used

const Backdrop = (props) => {
  return (<div onClick={props.onConfirm} />)
}

const ModelOverLay = (props) =>{
  return ( 
    <Card>
      <header>
        <h2> Invalid Input</h2>
      </header>
      <div>
        <p> The input is invalid </p>
      </div>
      <footer>
        <Button onClick={props.onConfirm}>Okay</Button>
      </footer>
    </Card>
  )
}

Step 4
Put the two methods your exported component
syntax:
ReactDOM.createPortal(child, container)

const ErrorModal = (props) => {
  return (
 <React.Fragment>

 {MyReactDOM.createPortal( 
   <Backdrop onConfirm={props.onConfirm}/>, 
    document.getElementById('backdrop-root'))}

 {MyReactDOM.createPortal(
  <ModelOverLay onConfirm={props.onConfirm}/>, 
   document.getElementById('overlay-root'))}

 </React.Fragment>
  );

};

export default ErrorModal;