I am using context api and hooks, there are 20 state variables, in each changes (setting states) the function calls again or re-renders so my concern is about calling hooks functions.

Example if I use useState, useReducer, useMemo, useCallback are they called again per any re-render?

function GroupProvider(props) {

    const socket = useMemo(()=> io(url), [socket]);
    const [grouplist, setGrouplist] = useState([]);
    const [refreshid, setRefreshid] = useState('');
    const [messages, setMessages] = useState({});
    const [ppl, setPpl] = useState(people);
    const [groupname, setGroupname] = useState(name);
    const [groupimg, setGroupimg] = useState(img);
    const [groupnamesaving, setGroupnamesaving] = useState(false);
    const [groupimgsaving, setGroupimgsaving] = useState(false);
    const [editgroupname, setEditgroupname] = useState(false);
    const [addingmember, setAddingmember] = useState(false);
    const [modalVisible, setModalVisible] = useState(false);
    const [leavinggroup, setLeavinggroup] = useState(false);
    const [changeAdminModal, setChangeAdminModal] = useState(false);
    const [changingAdmin, setChangingAdmin] = useState(false);
    const [loadingModal, setLoadingModal] = useState(false);

}

Here if in each re-rendering, hooks function calls, so it may affect on performance.

I am using context api and hooks, there are 20 state variables, in each changes (setting states) the function calls again or re-renders so my concern is about calling hooks functions.

Example if I use useState, useReducer, useMemo, useCallback are they called again per any re-render?

function GroupProvider(props) {

    const socket = useMemo(()=> io(url), [socket]);
    const [grouplist, setGrouplist] = useState([]);
    const [refreshid, setRefreshid] = useState('');
    const [messages, setMessages] = useState({});
    const [ppl, setPpl] = useState(people);
    const [groupname, setGroupname] = useState(name);
    const [groupimg, setGroupimg] = useState(img);
    const [groupnamesaving, setGroupnamesaving] = useState(false);
    const [groupimgsaving, setGroupimgsaving] = useState(false);
    const [editgroupname, setEditgroupname] = useState(false);
    const [addingmember, setAddingmember] = useState(false);
    const [modalVisible, setModalVisible] = useState(false);
    const [leavinggroup, setLeavinggroup] = useState(false);
    const [changeAdminModal, setChangeAdminModal] = useState(false);
    const [changingAdmin, setChangingAdmin] = useState(false);
    const [loadingModal, setLoadingModal] = useState(false);

}

Here if in each re-rendering, hooks function calls, so it may affect on performance.

• javascript
• reactjs
• react-native
• react-hooks

• That is the purpose of the hooks, to prestist data after the rerender, they are assigned only once. – DedaDev Commented Sep 22, 2019 at 8:15
• Starting that you could create a single state here as object with all these props, but yes they are called on each render as it happens if you want to access the state in class ponents. What useState does, is nothing more than returning you a value and a setter – quirimmo Commented Sep 23, 2019 at 6:06

3 Answers 3

Yes they are called on each render, in the first render it initialise a memory cell, on re-render it read the value of the current cell :

When you call a Hook like useState(), it reads the current cell (or initializes it during the first render), and then moves the pointer to the next one. This is how multiple useState() calls each get independent local state.

https://reactjs/docs/hooks-faq.html#how-does-react-associate-hook-calls-with-ponents

Always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a ponent renders.

Ref link:- https://reactjs/docs/hooks-rules.html

UPDATE: When I console log the development react library inside useState, and load a page with 1 usage of useState, on the first render, I get 23 calls to useState.

On re-render, triggered by a state change, I get 3 calls to useState.

In the same ponent, I have useEffect with a second argument of []. On the first render, it is called from the react library 12 times. On re-render caused by a state change, it is called once.

It does indeed call them every time.

I've edited this answer so that wrong info isn't posted.