DEV Community: Dan L.

understanding React Hooks and Effects

Dan L. — Sun, 20 Sep 2020 14:41:40 +0000

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>
  );
}

React Effects are normally triggered by React after each RENDER of the component.

An effect can contain also a cleanup method by returning it from the callback function like this

useEffect(() => {
  AppAPI.subscribeToNameChange(nameChanged);

  document.title = "name is ${name}"

  return () => {
    AppAPI.unsubscribeToNameChange(nameChanged);
  }
});

Multiple hooks can be used to separate concerns:

function FriendStatusWithCounter(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
  // ...
}

useEffect lifecycle

An important thing to note is the effect callbacks are applied at both lifecycles of init/destroy and after each render.
It is helpful because each state change should produce a consistent refresh of the component's UI.
This feature is provided out of the box, while for class based React components this needs to be addressed manually via componentDidUpdate.
Also any listeners bound during the effect's execution are likely to be linked to the current state of the component. So if the state changes, these listeners should be rebound:

function FriendStatus(props) {
  // ...
  useEffect(() => {
    // ...
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

However this is prone to performance issues if the callback execution is expensive.
To help with that, React provides a dirty check feature, by providing an extra param to useEffect:

useEffect(() => {
  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
  return () => {
    ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
  };
}, [props.friend.id]); // Only re-subscribe if props.friend.id changes

Source: https://reactjs.org/docs/hooks-effect.html

Redux vs Facebook Flux in React projects

Dan L. — Sat, 19 Sep 2020 08:23:05 +0000

It's always interesting to see how many libraries are out there that set up to do the very same thing.
That's usually because different providers set out to the same goal but due to company/political reasons don't arrive to merge/integrate.

One example of that is Facebook's Flux and Dan Abramov's Redux. It was interesting to see how similar these are. Only to realize the above statement later on, after reading this post:

https://stackoverflow.com/a/32920459

To me, Redux is a clear way to go and maybe would only still use Flux in experimental projects. As time is usually short and with hundreds of new frameworks out there, my approach is to just keep it simple and concentrate on the outcome.

Another issue with Redux and alikes is the boilerplate code generated. This can be fixed to some level:

https://redux.js.org/recipes/reducing-boilerplate

What is explained in reducing-boilerplate above, is very close to DSL(think how Terraform is configured) as for each reducer, you'd only write configuration. The logic is hidden under the template method, which is very nice.

IP protection and using AWS?

Dan L. — Fri, 29 Nov 2019 09:18:49 +0000

I'm a bit worried that if I start developing on AWS(and keep the URL private) at some point someone from AWS team might look at the deployed website and start copying it or steal the idea.

Is that something realistic? Has anyone else thought the same?

reassessing the registrar after a domain expired

Dan L. — Fri, 28 Jun 2019 22:43:39 +0000

I was trying to reactivate a domain for all extensions .com, .org and .net. They were disabled after missing a payment.

I asked IONOS(former 1and1) what's price and they said:

19.98$ for paying the reminder balance
25$ for reactivating:

.com    --      $1.00 first year, then $10.00 per year
.org    --      $12.00
.net    --      $12.00

Total                     $25.00

Then I discussed with them on chat and was a bit agressive of why they ask me to pay another 25$.

Next, I've told them I'd like to go to another registrar and they happily gave me the transfer codes.
But I've realized:

namecheap.com is an american registrar, I'd prefer an european after seeing Trump in USA the totalitarian measures taken in regards to Huawei. What if USA suddenly decides to do this for other things as well, applicable maybe for europeans only
they have higher prices for the offer:
- domain .com cost 2$ more - 12$/year vs 10$ on 1and1.com(ionos.com)
- email costs extra 2$, ionos.com is free
- SSL costs extra, ionos.com is free

And eventually I returned to ionos.com live chat but this time they said I'd have to pay 34$ to reactivate, because they did a mistake in initial offer(maybe I'd have paid just that if I didn't raise my voice though...but again it's my fault for being a bit aggressive).
They were right because the 1$ is for first year and this is a reactivation of an old domain...so it makes sense I should pay the 10$ for it.

So all in all, best not to start comparing registrars between themselves and let them know.