DEV Community: nat_souljah

React Hooks like am 5-ish... (useRef with a pinch of useState)

nat_souljah — Sun, 06 Feb 2022 14:28:03 +0000

We all know the "explain it like I am 5" test which seeks to determine that the taker of the challenge can truly express the topic to its very basics such that a five-year-old can make sense of it. This helps to ascertain whether or not that a line of thought is truly understood. That's what I seek to do in this series, by breaking down react hooks that I use quite often, this will help me in the process to truly understand what these hooks are about and most importantly use-cases to use them, further improving my React knowledge and perhaps yours too as you read.

The useRef hook:

The useRef hook in the simplest of terms is a lot like the


 DOM method (assuming said 5-year-old already knows the document model and its related methods), whereas if the DOM is a tree, useRef allows you to choose a branch of your choice or a leaf and do whatever you want with it, eg. take its value and add some text to it, measure the height etc.

Using

 ```querySelector()```

 vs

 ```useRef()```

 same scenario

With querySelector in Vanilla JS

// HTML

// JS
const textValue = document.querySelector('.someValue').value
console.log(textValue) // returns value "abc"




With useRef in React

const UseRefBasics = () => {
const refContainer = useRef(null)
const handleSubmit = (e) => {
e.preventDefault()
console.log(refContainer.current.value) // value "abc" will be returned
}
return (
<>

submit

</>
)
};




# What about useState ?
The useState hook in my opinion is like declaring a variable in react, although you can still declare variables in react, said variables cannot trigger a state change, which is what react is all about. Therefore, by declaring useState, you are telling react to hold a value and watch it for changes, also the useState hook returns the value you initialized when you called useState and a function to change that value.

// React.useState Hook Example

const someComponent = () => {
// 0 is the initial value in the count, a value that
// will cause a rerender when updated by calling
// setState, in this case: setCount.

const [count, setCount] = React.useState(0);

return

Some content rendered.;

};




Refer to the useRef example earlier to compare

## The difference: 
useRef does not trigger a rerender of the react elements, however, it can hold literally any value, even a DOM element or its parent, using useRef together with useEffect can result in a rerender but upon further research, callback ref is more appropriate to the task, here's a source for reference:  [using useRef inside useEffect](https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780) 


# What can you do with useRef ?

Since useRef() is the equivalent of the DOM querySelector (IMO), you can use it to get a  parent div element, measure its height or width, or any properties available.

You can also use it to grab a textInput element, and autofocus on it as soon onLoad (with useEffect()).

# Understood? perhaps a bit... or more?
Anyways I heavily doubt there's a five-year-old prodigy that is writing React, who knows, there might be, I don't know how well this explanation has worked out for you, but in the course of this write up I have had to refer to the DOCS and googled several articles to make this easy on myself. In effect, I have better understood a hook I barely use and might use more often. For further understanding, please visit the docs, which might be jargon-heavy, but more accurate in terminology and detail.

React Hooks like am 5-ish: useContext with a pinch of Composition...

nat_souljah — Tue, 01 Feb 2022 22:21:46 +0000

I am fully convinced that if you are reading this you are definitely not a toddler who writes React, perhaps you are reading this because you have hit "the wall" and seek an escape, the kind of relief that simple and precise information can give. I am no expert but I have hit this wall countless times and that's why I put together this information as simple as I can, just so the future me that hits it again will have a reference to freshen up, and perhaps you can too.

Straight to the chase:

IMO, React sought to solve one major problem, to be a great option as the View of the "MVC" architecture, a problem that I haven't necessarily experienced because I don't know what scope "large applications" fall into, is it 5000+ lines of code, youtube level codebases? perhaps... but what I do know is when you are building very complex web applications with several parts that are likely to be reused repeatedly, you start to wish that you didn't have to copy and paste code so many times (that's what I did at one internship). You begin to wish that you wrote something once and it could be reused many times, that's what components are for. React solves that problem and more...

Some parts of a website are going to hold static data, data that won't change (if so you probably could get away with any good CMS + some templates), and others will continuously display different information depending on what "kind of data" is assigned. This is where state management comes in.

The React core provides two known ways of representing states in a React component, the previously discussed useState hook and the famous "Context API". useState hook and the famous "Context API".

useState and the Context API

Class components in React have state (state is simply the current dynamic value of the component) built-in,

// Example stateful class component
class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()}; // state
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

functional components used to be used just for presentation before the release of hooks made it possible to add state.

That's simple enough, right?
What if you need to track several values at once whilst passing them to other components that require the same data to be relevant, that's a common use case.

For example, you have managed to build an amazon eCommerce clone where a user can sign in... you can track the user's login status by using useState and then passing the value through all the child components to whichever component that actually needs the user's email to be displayed, this is known as "prop drilling", and aptly named it is.

// Example stateful function component
function Clock() {
 const [dateState, setDate] = React.useState({date: new Date()})
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {dateState.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }

useState is "local" to the functional component and therefore, the only way you will be able to get the data to the child component will be through "prop drilling" which becomes unbearable after about three levels deep. How do you get around this: Most will quickly call on state management tools or perhaps composition, however it appears composition is less used as compared to state management.

To Context or To Compose:

The useContext hook in React solves the problem (prop drilling) easily, but the react docs provide a subtle caution, that it will introduce additional complexity to your code, whilst making your components less reusable ( before you use context ), less reusable in the sense that, once a component is dependent on context to have full functionality, it cannot maintain same functionality outside of context, hence it's less usable, for this reason, they offer an alternative to consider before using context. Outside of the official React docs "Redux Toolkit/Redux" is also very popular as a state manager.

Before Context, consider Composition:

How do you use Composition to get past this issue, the react docs referenced in the previous paragraph highlight how but here's an example with code

Prop Drilling:
The user data is passed 4 levels deep into the component hierarchy to reach the component that actually needs it.

// Before implementing context
import React, { useState } from "react";

//* Main Parent Component
function App() {
  let [currentUser, setCurrentUser] = useState(null);
  return (
    <div
      className="App"
      style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
      <div style={{ backgroundColor: "lightgray" }}>
        <Header />
      </div>
      <div style={{ flex: 1 }}>
        {currentUser ? (
// passing user as prop to Dashboard
          <Dashboard user={currentUser} />
        ) : (
          <LoginScreen onLogin={() => setCurrentUser({ name: "John Doe" })} />
        )}
      </div>
      <div style={{ backgroundColor: "lightgray" }}>
        <Footer />
      </div>
    </div>
  );
}

//* Children Components
function Header() {
  return <div>Header</div>;
}

function LoginScreen({ onLogin }) {
  return (
    <div>
      <h3>Please login</h3>
      <button onClick={onLogin}>Login</button>
    </div>
  );
}

function Dashboard({ user }) {
  return (
    <div>
      <h2>The Dashboard</h2>
      <DashboardNav />
// Passing user prop to DashboardContent
      <DashboardContent user={user} />
    </div>
  );
}

function DashboardNav() {
  return (
    <div>
      <h3>Dashboard Nav</h3>
    </div>
  );
}

function DashboardContent({ user }) {
  return (
    <div>
      <h3>Dashboard Content</h3>
// Passing user prop to WelcomeMessage
      <WelcomeMessage user={user} />
    </div>
  );
}

function WelcomeMessage({ user }) {
// Welcome message finally gets component,
// and this is prop drilling at it's worst.
  return <div>Welcome {user.name}</div>;
}

function Footer() {
  return <div>Footer</div>;
}
export default App;

After Context:

//* Main Parent Component
// initialising context
let Context = React.createContext();

function App() {
  let [currentUser, setCurrentUser] = useState(null);
  return (
// Context wraps around the main parent component, any child component within,
// has access to whatever value is in context.
    <Context.Provider value={{ currentUser }}>
      <div
        className="App"
        style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
        <div style={{ backgroundColor: "lightgray" }}>
          <Header />
        </div>
        <div style={{ flex: 1 }}>
          {currentUser ? (
            <Dashboard />
          ) : (
            <LoginScreen onLogin={() => setCurrentUser({ name: "John Doe" })} />
          )}
        </div>
        <div style={{ backgroundColor: "lightgray" }}>
          <Footer />
        </div>
      </div>
    </Context.Provider>
  );
}

//* Children Components
function Header() {
  return <div>Header</div>;
}

function LoginScreen({ onLogin }) {
  return (
    <div>
      <h3>Please login</h3>
      <button onClick={onLogin}>Login</button>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h2>The Dashboard</h2>
      <DashboardNav />
      <DashboardContent />
    </div>
  );
}

function DashboardContent() {
  return (
    <div>
      <h3>Dashboard Content</h3>
      <WelcomeMessage />
    </div>
  );
}

// Notice that there is no prop drilling...
// And the component that needs the prop is the one that gets it...
// However, this component's reuse is now dependent on context...

function WelcomeMessage() {
  let { currentUser } = React.useContext(Context);
  return <div>Welcome {currentUser.name}</div>;
}

function DashboardNav() {
  return (
    <div>
      <h3>Dashboard Nav</h3>
    </div>
  );
}

function Footer() {
  return <div>Footer</div>;
}
export default App;

Now to Composition

Now that we have explored solving the problem with Context, let's take a look at using Composition to solve the same problem. Composition aims to maintain the reusability of the component whilst avoiding prop drilling.

We will do this by making use of the children prop that's available to us in React.
The children prop allows you to create "wrapper components", these components wrap take a component or components and render them/it.
Observe the basic example below to understand the final implementation.

function ComponentA ({children}) {
    return(
         {children}
  )
}

// the wrapper component
<ComponentA> 
// the child component
   <childofA/>  
</ComponentA>

I hope this brief demo is OK for now, otherwise here's some expansion on the topic Composition and Inheritance

Now to the much-awaited solution:

//* Main Parent Component

// Notice that we are no more using the context hook
function App() {
  let [currentUser, setCurrentUser] = useState(null);
  return (
    <div
      className="App"
      style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
      <div style={{ backgroundColor: "lightgray" }}>
        <Header />
      </div>
      <div style={{ flex: 1 }}>
        {currentUser ? (
          <Dashboard> // wrapper component
            <DashboardNav /> // wrapper component
            <DashboardContent> // wrapper component
// and we pass our prop, whilst escaping drilling, atleast three times.
              <WelcomeMessage user={currentUser} /> 
            </DashboardContent>
          </Dashboard>
        ) : (
          <LoginScreen onLogin={() => setCurrentUser({ name: "John Doe" })} />
        )}
      </div>
      <div style={{ backgroundColor: "lightgray" }}>
        <Footer />
      </div>
    </div>
  );
}

Additional Useful Implementation

How to create Wrapper components

Composition, alternative to prop drilling

When and How to use Composition

Additional References for further reading...

Getting things done, the easy way...

nat_souljah — Fri, 01 Jan 2021 07:27:29 +0000

Got several tasks to finish and not even done with one yet?

Photo by Magnet.me on Unsplash

Do you sit for several unproductive hours only to leave the office with very little accomplished?
Well, seems like I can be of help.
Let me go straight to the point, perhaps you really need this information, so why waste your time (since you won’t be getting it back) and withhold this help any longer?

Let me introduce you to a technique so simple yet so effective, a technique that can help you organise and get things done, even if you are a video game-loving, social media surfer like me. Ever heard of the Pomodoro technique? yeah, maybe not and that’s why you are probably here unless some programmers cryptic algorithm threw this article your way.

Photo by Oladimeji Ajegbile on Unsplash

The Pomodoro Technique is a time management method developed by Francesco Cirillo in the late 1980s.[1] The technique uses a timer to break down work into intervals, traditionally 25 minutes in length, separated by short breaks. Each interval is known as a pomodoro, from the Italian word for ‘tomato’, after the tomato-shaped kitchen timer that Cirillo used as a university student.

The above is lifted straight from Wikipedia, why reinvent the wheel when you can just copy.
Anyways, the Pomodoro technique encourages you to split your mammoth office task or notes into bite-sized chunks of time, so you can take one small step at a time to slowly finishing up the boring 88-line SQL Query or the long list of clients in the excel document that your boss gave you.

Finally, The Hack!

Dividing your tasks into several bits alone sounds like work enough to make you jump in and try getting work done straight away (work that you will probably inefficiently finish, that’s if you finish…)
Therefore, do this instead, find a Pomodoro app in your app store, I personally recommend this one: https://play.google.com/store/apps/details?id=com.superelement.pomodoro

Features:

Allows you to list the tasks like a to-do list, so you can check off the finished ones.
You can set a custom duration for each session before breaks, you can do the same for breaks too.
You can create Folders for similar tasks for organisation.
This app is cross-platform and works on all the most popular platforms (Apple Ecosystem, Android and PC) and the data will sync across your devices.
Another interesting feature is the “Focused Mode”, where the app will block access to apps that are likely to lure you away into the world of dawdling.

Conclusion

Using this app, I greatly improved my time management in the office, the short breaks I added in between Pomodoros also helped my stress, physically and mentally. Overall, I enjoy working more when I use this method. Highly recommend. Also, a major key of this method is to remain completely FOCUSED on the task until it’s done or it’s break time. Utilise your break time to take a walk or something and come back refreshed.

Repeat cycle.

Thanks for reading …
Feel free to leave any comments, and if you find this helpful, please share…
Read on Medium