Hooks in React ....... and bonus content on using photos in your applications

#react #javascript

Goodbye classes, Hello hooks!

I'll admit, I haven't really had to use classes very much seeing that I am new to programming and React Hooks were introduced in February of 2019, but that doesn't mean I can't have full appreciation of them. I of course have delved into classes just to have the general knowledge, and with the short amount of time we have spent together, I am highly grateful for the release of React 16.8 and Hooks.

The most notable thing about React Hooks is how they allow programmers to reuse stateful logic without having to change the hierarchy of their components. This allows for programmers to share Hooks with many components, which in turn, makes our lives much easier. Classes did not give us this flexibility. This does not mean that coders have to refactor previous code or discontinue the use of classes, as it is still an option to use them.

And guess what?! We can even build our own hooks! However, I just want to go through two of the more common ones used in day to day coding. Also, keep in mind that hooks will not work inside of classes, they're meant to be used instead of writing classes.

Let's talk about UseState();

Let's look at a code snippet from reactjs.org that shows the use of state

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

As you can see, we must import our hooks from React.

What UseState() does is allow a state variable to be declared. This allows us to preserve values between function calls. This would be the same use as this.state with classes except it does not disappear when the function exits, rather React will preserve its state.

When using state, we use const to declare a new state variable and we have the option to name our variables as we please. In the example above, we used "count" which is set at an initial value of 0. React will remember the value, or rather, argument that we passed to useState. Unlike with classes, we can pass a number or a string to state rather than only an object. The second variable in our example above is the setCount. This is actually a function that will update our state.

We can now use the variable count directly as seen below:

<p>You clicked {count} times</p>

Now let's update state!

This is where our setCount function comes into play. Since we already have our variables in play, this is how we can update our state

 <button onClick={() => setCount(count + 1)}>
    Click me
  </button>

Keep in mind that if you want to store two different values in state, you will have to call useState() twice.

UseEffect();

This hook will run a function every time the component renders. Components render when it first loads initially and also when state changes it will reload to update the browser. This can be very useful so that we can create side effects when desired, such as for when specific values in your application may change.

Below is an example of how to implement useEffect() from reactjs.org

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

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

As you can see, just like any hook, you must import it from React. With useEffect implemented above, the function inside of useEffect will run during any rendering.

When you want to specify when to re-render with useEffect, you can use something called a dependency array. Below is an example.

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes

As you can see above we added a dependency array with [count]. This will only re-render when count changes.

You can also provide a clean up function within your useEffect such as seen below:

useEffect(() => {
  performSideEffect();
  return cleanUpFunction;
}, []);

Notice how above there is an empty dependency array. The purpose of this is to only re-render on initial load rather than the hook being executed on both initial load and update.

This was just a short look into the magic that useEffect() can allow!

Okay so I promised bonus material, so here we have it.

I am not sure that this is common knowledge since it took me some time to figure out how to do it so I wanted to sure it with the coding community.

Yeah, you can host them on a free site, but I like this way better.

Start with saving the photos you want to use to your desktop in JPEG format.

Next you will navigate to GitHub and choose ANY repository, then navigate to the "Issues" tab.