Should I still use connect() function? #React.js

guillermodv — Mon, 12 Oct 2020 00:06:50 +0000

With a small read, Help me to decide that…

Let´s review it just a little.

I will start writing just a few lines of code.

import React from "react";
import { addTodo, deleteTodo } from './actions’

const TodoApp = (addTodo, deleteTodo, todos) => (
//A fantastic code...
);

function mapStateToProps(state) {
  return { todos: state.todos }
}

const mapDispatchToProps = {
  addTodo,
  deleteTodo
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoApp);

Let's recap!

The connect() (Higher-Order Component) function connects a React component to a Redux store.
This function provides its connected component with the data that I need from the store, and the functions that I need to use to dispatch actions to the store.

function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)

On connect function we have mapStateToProps and mapDispatchToProps props.

The mapStateToProps and mapDispatchToProps deals with your Redux stores.
For more information about connect read the official documentation.

Ok, so you don't want to write a function Connect, how do you think to replace mapStateToProps and mapDispatchToProps ?
mmmm, let me think just a little more.

How do I think to replace that?

If I don't write this connect you need to still receiving props from the state and I want to still dispatch functions, how can I still using this?

Hooks it`s the answer!

Oh buddy, what that means?

Hooks

The ability to handle a component's state and side effects is now a common pattern in a functional component.
The react-redux library now has support for Hooks in React and React Native apps that make use of Redux as the state management library.
React Redux offers a set of Hook APIs as an alternative to the omnipresent connect().

Let's use these hooks!

*using useSelector

useSelector is The equivalent of map state to props. It takes in a function argument that returns the part of the state that you need.

*using useDispatch

useDispatch is The equivalent of map dispatch to props. We will invoke useDispatch and store it to a variable, dispatch. Dispatch will work with the all actions imported from the actions folder.

Let's rewrite our code!

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { addTodo, deleteTodo } from './actions’

export const TodoApp = () => {
const todos = useSelector(state => state.todos); const dispatch = useDispatch();
return (
//a fantastic code that dispatch actions
(example: dispatch(addTodo()))
);
};

Conclusion:

The main benefit of using the Redux Hooks is that they are conceptually simpler than wrapping components in the connect higher-order component.
Another benefit of not using the higher-order component is that you no longer get what I call “Virtual DOM of death” (will be my next article).
With connect, you are wrapping your component and injecting props into it. While the Redux Hooks have many benefits, there is one benefit of using connect instead of the Redux Hooks, and that is that it keeps your component decoupled from Redux

Tell me in the comments what do you think about that, and what do you suggest to me to still using connect function?.

Reference.

https://es.wikipedia.org/wiki/Steve_Jobs
https://react-redux.js.org/api/connect
https://react-redux.js.org/api/hooks

Using React.memo() to skip unnecessary rendering.

guillermodv — Sat, 03 Oct 2020 23:00:29 +0000

“the one who does not have a memory, creates one of paper” Gabriel García Marquez.

Why do we need to use memo on React.js components?

First of all, let´s recap how React works. Every time that our state changes the component will be rerendered, so each child component will be re-render throwing functions on the creation component.
Then if for example, we have a component father called Customers and a child component called ListCostumers that shows a list of Customers with every row has a lot of information of that component that was obtained by the way of fetch on use effect method or just using a get function like Axios or something like that. Every time that the father component (Customers) will be re-rendered her son ListCostumers will be rerendered and the fetch function will be called, paying for that a lot of time on computer time and money if we pay for cloud database use or something like that.
To avoid this, we can say that the child component (List Customers) may be memorized (React.memo) to avoid re-renders.

How can I use that and what does it mean?

Let me write just a line of code…

const ListCustomers = React.memo(({customers}) => (a fantastic code...));

React started to observe this received props called customers and memorized them and after the first render of this component every time that we re-render this child component customers will be compared with the last customer's props and if we don't have any changes this child component will not be rerendered avoiding a fetch or render functions that consume a lot of computational power.

So, ok great from now, I am going to always use memo components. Is it great?
Just no, boy...

Why can't we always use a memo?

Memo consumes a lot of computational power too, you need to consider that a list comparative for example cost in terms of computational times.

So, Every line of fantastic code will consume computer time.
Yes, but it's not easy we need to consider a lot of things.

We need to considerate that the power consumption of memo comparatives is lower than executing a fetch or another function that we need to use to render our child components and how we know each child component too ( cascade render ) and for example if we need to fetch from AWS or Cloud Database we need to pay this computational power if we have this situation come on, use memo!.

Conclusion

Great power comes with great responsibility, use it with care, you need to ensure where you want to use your computational power.

https://en.wikipedia.org/wiki/Gabriel_Garc%C3%ADa_M%C3%A1rquez
React 16.6: React.memo() https://reactjs.org/blog/2018/10/23/react-v-16-6.html

Guillermo A. Del Vecchio.
Sr software engineer, Golden Boy React.js / React Native Developer.

DEV Community: guillermodv