Questions tagged [react-hooks]

0

votes
0

answer
8

Views

How to use useRef hook to select next TextInput after pressing next keyboard button with redux-form

I know we can do this easily with react class method.because we have this.ref. but I am not sure how to do this with useRef hook in functional component. using tricks written here This is how I am trying to do this. ... const inputEl1 = useRef(null); const inputEl2 = useRef(null); return ( { inputEl...
shubham choudhary
0

votes
0

answer
5

Views

How to pass value to react-typescript context provider?

I am trying to pass value to a context provider to re-render children. My value is changed, but when I pass it to provider it doesn't set this value as current value. type LanguageContextType = { lang: string; changeLanguage(language: string): void; }; const LanguageContext = React.createContext({ l...
PrEto
0

votes
0

answer
16

Views

Should I include setState in useCallback's array of dependencies?

const [active, setActive] = useState(false); const onActiveChanged = useCallback( isActive => () => { // do something setActive(isActive); }, [setActive], // or just [] is okay? ); When using useState and useCallback (or useMemo) together, should I include setState in the array of dependencies?
alanhchoi
1

votes
0

answer
725

Views

React hooks useMemo/useCallback skip

How can I use useMemo's or useCallback's seconds argument to optimize based on a value inside the callback? const [s, setS] = useState({ page: { title: 'a', index: 3 } }); const getPage = data => data.page; const cb = useCallback(data => setS(data), [getPage(data)]); //...
norbertpy
1

votes
1

answer
264

Views

Trying to use React Hooks in ReactDOM.render. Is it right?

So i get dispatcher.useEffect is not a function react.development.js:1463 Uncaught TypeError: dispatcher.useEffect is not a function at useEffect (react.development.js:1463) at Preload (VM75697 Preload.js:40) at ProxyFacade (react-hot-loader.development.js:677) at mountIndeterminateComponent (react-...
chrisands
0

votes
2

answer
14

Views

How to target a specific item to toggleClick on using React Hooks?

I have a navbar component with that actual info being pulled in from a CMS. Some of the nav links have a dropdown component onclick, while others do not. I'm having a hard time figuring out how to target a specific menus index with React Hooks - currently onClick, it opens ALL the dropdown menus a...
geeberry
1

votes
2

answer
29

Views

How to iterate over different variables/states to create an object?

I need help iterating over variables/state elements to create an object. I am going to iterate over firstName state, lastName state, and many more states. The code is getting way too complicated. Was wondering if there is a proper way to build an object for a graphql call? or just a better way to bu...
Martin Fels
1

votes
2

answer
326

Views

Confusion about the inputs array of useEffect(React Hooks API)

Some React Hooks API like useEffect, useMemo, useCallback have a second parameter: an array of inputs: useEffect(didUpdate, inputs); As the official document said: @see Conditionally firing an effect That way an effect is always recreated if one of its inputs changes. every value referenced inside t...
李元秋
1

votes
0

answer
124

Views

Bug on integrating Material UI hooks and Apollo hooks

When using Material UI hooks (as its example shown here) with NextJS and react-apollo-hooks, received bug - TypeError: Cannot read property 'theme' of undefined at MyDocument.render (/material-ui/examples/nextjs-hooks-with-typescript/.next/server/static/development/pages/_document.js:156:38) Expect...
Ivan Wang
1

votes
2

answer
167

Views

Error when using useState in official example

This code came from here. import React from 'react'; import useState from 'react' let f = function() { const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } export default f; Firstly, this line from that page... import React, { useState } from...
Ian Warburton
1

votes
1

answer
28

Views

Context.Provider rerendering to initial state when routing between pages

AppContextProvider wraps all components, private and not. Upon logging in, dispatch is called and the user info is updated and viewable in a private appbar. However, when navigating to another private route, the appbar goes back to the context default state. class App extends Component { render()...
Dan
8

votes
3

answer
1.9k

Views

Multiple calls to state updater from useState in component causes multiple re-renders

I'm trying React hooks for the first time and all seemed good until I realised that when I get data and update two different state variables (data and loading flag), my component (a data table) is rendered twice, even though both calls to the state updater are happening in the same function. Here is...
jonhobbs
1

votes
0

answer
42

Views

React-Popper + custom Components using Hooks

I have a set of Components that should not use react-popper internally. I'm trying to have them be used as Reference with react-popper. I get that the solution is to use forwardRef, however, I spent hours trying to do it without great success. Is there any way someone could provide a sample for a si...
Mose
5

votes
1

answer
1.4k

Views

useState set method not reflecting change immediately

I am trying to learn hooks and the useState method has made me confused. I am assigning initial value to a state in the form of an array. The set method in useState is not working for me even with spread(...) or without spread operator. I have made an API on another pc which I am calling and fetchin...
Pranjal
1

votes
1

answer
34

Views

Creating a simple animation in React-Pose

I'm having trouble creating a simple animation in React-Pose. The two problems are 1) I can't get the animation to revert to the initial condition. The hovering variable is changing to false when the mouse leaves, but it the animation doesn't change back. 2) I can't manipulate the animation, I wante...
Jon
1

votes
1

answer
150

Views

How does useState() in react retrieve the correct state object and function for a functional component when using the state hook? [duplicate]

This question already has an answer here: How does React implement hooks so that they rely on call order 1 answer I am currently working on my understanding of the useState hook from react. What I would like to know is; when useState is called how is it able to correctly retrieve the state object a...
AdaRaider
1

votes
1

answer
86

Views

Hooks and immutable state

I am apologising in advance if this questions has already been answered before (and also for the long post, but I've tried to be as specific as I could be). But, the answers I found does not completely satisfy me. I want to use the new amazing React Hooks for my project. And for what I've been doing...
entiendoNull
1

votes
1

answer
89

Views

React Hooks FAQ: implementation of getderivedstatefromprops leads to rendering with incoherent state

IMHO The suggestion from React Hooks FAQ #getDerivedStateFromProps leads to one first rendering with a value of row that doesn't correspond to the value of isScrollingDown . As the call to setIsScrollingDown only schedules a new rendering and doesn't affect the current rendering, the latter will be...
bbo
1

votes
1

answer
180

Views

React useEffect hook not calling mocked function

Edit: This is now fixed, but I'm not sure why. Please review this original post and my additional edit below, I would appreciate feedback as to why this is now working. So I am new to React hooks. I'm using a useEffect() hook in a component, and that hook calls a function, searchForVideos() from my...
user2223059
1

votes
0

answer
113

Views

Using useReducer results in Invariant Violation: Hooks can only be called inside the body of a function component

I'm having some issues with latest React for React Native all development, since React introduced hooks I'm trying to play around with it, but to no avail. I'm having a Screen for RN to do some splash screen animations and it does not work with latest React, always giving me the above error. (it is...
Patryk
1

votes
1

answer
86

Views

How to use material-ui-pickers's date picker with ReactJS's State Hook and pass date to the parent component?

I am trying to use material-ui-pickers's date picker, where example demos are written using State Hooks. I would like to get the date's value as a callback to the parent component. This is the child component: import React, { Component } from 'react'; import { Fragment, useState } from 'react'; imp...
Tom
1

votes
2

answer
53

Views

Is it wrong export React Hooks to manage global state?

I am exporting the return of a Hook which I use in the root component of a project. Then it becomes very easy for the other components to import globalState and setGlobalState (). I did several tests here and it worked very well. The problem is that I have not seen anyone in the community using it i...
user2410424
1

votes
1

answer
38

Views

“i18next backendConnector: loading namespace failed” when using react-i18next useTranslationHooks

I'm trying to implement react-i18next on my create-react-app application with useTranslation() hooks. However, in the console, the debug mode shows i18next::backendConnector: loading namespace billingAddress for language en failed failed parsing /locales/en/billingAddress.json to json and i18next...
WhyINeedToKnowThis
1

votes
0

answer
45

Views

react useCallback hook unexpected behavior on re-render

Maybe I just don't get how hooks are supposed to work, but I have tried many different configurations to convert this component to hooks and they all fail. export const VideoContainer = ({ localStream, remoteStream, status }: Props) => { const classes = useStyles(); const setLocalStreamEl = useCall...
deltaskelta
1

votes
2

answer
98

Views

Using nested hooks to update state

I'm trying to figure out how I can use nested hooks to update state in my parent component. I recently learned that hooks basically follow the same setState() async updating pattern but I'm struggling to find my war around that. I have 3 custom hooks: useValidateContent: A custom hook to validate a...
bos570
1

votes
1

answer
20

Views

React: Function call portal does not contain target

we got the issue that a useReducer is closing a Portal in our Application and we can not controll the behaviour of it. https://codesandbox.io/s/724ozpxxk1 As you can see, when you click on the trigger a gets opened and a handleOutsideMouseClick gets appended. When you click on the first row, the ha...
ChiefORZ
1

votes
1

answer
30

Views

why are initial items not transitioned out using useTransition

I am using react-spring's useTransition to transition between pages like this: const context = useContext(AppContext); const items = [context.page]; const transitions = useTransition(items, item => item.label, { initial: { transform: 'translate3d(0,0,0)', opacity: 0.2, }, from: { transform: 'transla...
DaanH
1

votes
1

answer
44

Views

Is there a prevent the input clear when using material-ui TextField with datetime-local type?

If execute the code below and enter only date, the rendering process will run and the date input will clear. This TextField is intended to be used as a search condition for this component. import * as React from 'react' import { TextField } from '@material-ui/core'; export const App = () => { const...
kanichi uegaki
1

votes
1

answer
50

Views

ReactJS: how to call useEffect hook only once to fetch API data

Using React, I have the following functional component where I make use of useEffect(): import React, { useEffect } from 'react'; import { connect } from 'react-redux'; const MessagingComponent = React.memo(({ loadMessages, messages, ...props }) => { useEffect(() => { loadMessages(); }); return Thes...
tmp dev
1

votes
1

answer
32

Views

How to avoid coupling when using useReducer?

To prevent passing callbacks to child components I am using useReducer instead. This avoids the issue of child components re-rendering on each parent render but the downside seems to be a tight coupling between parent and child. By tight coupling, I mean that the child needs to be explicitly aware...
user1843640
1

votes
1

answer
41

Views

Multiple fetch data axios with React Hooks

I would like to get global information from Github user and his repos(and get pinned repos will be awesome). I try to make it with async await but It's is correct? I've got 4 times reRender (4 times console log). It is possible to wait all component to reRender when all data is fetched? function App...
Direct 96
1

votes
1

answer
47

Views

How do I easily change context?

I'm using storybook to mock pages of my app. I have an idea where I wrap storybook with one context for mock data, and then when I run the real application I can give it another context where it'll get data from an API. How can I do this with useContext? My issue is that useContext requires me to i...
Kwokamole
1

votes
0

answer
35

Views

How can I submit input with ability to restore it's value with onBlur?

I want to make simple functional Input component using hooks. I want it to submit its value on button click or Enter press. const Input = ({ name, value, onSubmit }) => { const [input, setInput] = useState(value); //set input's value with props.value useEffect(() => { setInput(value); }, [value]); r...
lu4ezar
1

votes
1

answer
72

Views

React - Hooks + Context - Is this a good way to do global state management?

I am trying to find a good, clean, with little boilerplate, way to handle React's global state The idea here is to have a HOC, taking advantage of React's new Hooks & Context APIs, that returns a Context provider with the value bound to its state. I use rxjs for triggering a state update on store ch...
B. Cole
1

votes
0

answer
35

Views

useRedux On version 7

I'm quite confused how is the functionality of the hook that appears on the react-redux 7.0.1? I even can't find an example, Anyone can provide a simple example of how to define or use the useRedux hook? Thanks
Nestor
1

votes
1

answer
24

Views

Infinite rerendering loop when using information from refs to set state

I have a parent functional components that uses useState hook to set state (the fact that this issue is in hooks should be irrelevant, because I experienced the same behaviour when using class component) and it needs to set state about some information that it gathers when rendering children, but wh...
Martin Rajdl
1

votes
1

answer
45

Views

Does still make sense to use HOC with React Hooks? [duplicate]

This question already has an answer here: When and how to choose between React Hooks and old HOC props passing? 2 answers I have a question: Does still make sense to use HOC with React Hooks? If yes, in which cases would be a good idea to use it? Thank you.
Alfrex92
1

votes
2

answer
21

Views

How to get webcam feed with react hooks?

I am trying to get a webcam feed to display on my app using react hooks. I also need to be able to capture the latest image from the feed I believe I have the foundations but am missing something. import React,{useState,useEffect} from 'react' export function VideoFeed(){ const[constraints] = useSta...
GrepThis
1

votes
0

answer
19

Views

Testing react context with jest and react-testing-library

I am trying to set up tests for my component App.js that takes in a context as a prop and returns a provider. The issue is when I am trying to test it, the context that I pass into it always resolves to undefined. I put a console log in the component and and one between creating the context and crea...
RhinoBomb
1

votes
2

answer
37

Views

How to update with React Hooks specific value of an array inside an object?

I have an object which i want to update it using React Hooks const [rowEdit, setRowEdit] = useState({ rowEdit: { '1x0': [1, 1, 1, 1, 1] } }); I loop through the array with .map, so i have the index for each element. How can i make the second value equal to 0?
Besart Marku

View additional questions