score:-1
in general, if you declare a simple javascript variable yourself, it will be updated on each render. refs are used when you need to persist some value during re-renders, actually it will give you the same ref object on every render.
but in this case, you've moved the variable outside the component, and used it inside the component, if you want to change it, it will break the functional programming rules (pure functions)
score:3
react.useref(0)
is part of the component life-cycle. if you render two different app
in your application, those two ref won't collide. they will if you refer to the same shared and mutable variable, like in your second example. you will have a situation where one instance of app
will have unintended side effects to the second instance of app
.
score:4
i think that the difference is about the component packaging and exporting. let's say you import app
from the file, this doesn't mean the whole file is exported, this is a module, only the exported app
component gets exported. so when you use ref, you have the access to a persistent variable without going outside of the component scope, so you can still use it when exporting.
also how would you differentiate between multiple instances of the app
component that might need a different value with the same variable? useref()
automatically distinguishes those.
Source: stackoverflow.com
Related Query
- Difference between useRef and normal variable
- Difference between useCallback and useRef hooks when useRef is used as an instance variable
- Difference between passing in null and undefined in useRef
- Difference between variable in and out constructor function
- Difference between arrow functions and normal functions in React Native
- What is the difference between React Native and React?
- Difference between npx and npm?
- What is the difference between state and props in React?
- What's the difference between "super()" and "super(props)" in React when using es6 classes?
- React : difference between <Route exact path="/" /> and <Route path="/" />
- What's the difference between `useRef` and `createRef`?
- What is the difference between HashRouter and BrowserRouter in React?
- What's the difference between useCallback and useMemo in practice?
- Difference between component and container in react redux
- Can anyone explain the difference between Reacts one-way data binding and Angular's two-way data binding
- Difference between declarative and imperative in React.js?
- What is the difference between .ts and .tsx extensions. Both are used as extensions for typescript files in react. So where should we use them?
- In React, what's the difference between onChange and onInput?
- Difference between React Component and React Element
- In useEffect, what's the difference between providing no dependency array and an empty one?
- What's the difference between hydrate() and render() in React 16?
- What is the difference between redux-thunk and redux-promise?
- What is the difference between componentWillMount and componentDidMount in ReactJS?
- What is the difference between NextJs and Create React App
- Difference between enzyme, ReactTestUtils and react-testing-library
- react router difference between component and render
- Difference between import React and import { Component } syntax
- What is the difference between jest.fn() and jest.spyOn() methods in jest?
- What is difference between reactstrap and react-bootstrap?
- what's the difference between getDerivedStateFromError and componentDidCatch
More Query from same tag
- Why is react skeleton not rendering?
- How to set minimum height on material cards in Material UI?
- React / Redux: Should containers have any knowledge of state structure?
- React/Redux. Cannot intercept and override click events on nested components in main App component
- How i can access my data in react frontend after i get paginated data from faunadb?
- Custom hook and dynamic useEffect dependency
- I got server error when use next.js , Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>
- Cannot update state with file uploader in reactJS
- SyntaxError: Unexpected token, expected , (10:10)
- Display html content in iframe via props in React
- can i share React user post length to other component
- useState in useEffect does not update state
- How to add an object in the array of objects in react js
- How to use functions in react-avatar-editor
- Adjusting Tab Width in Material UI App Bar
- Next.js: Calling Thunks in getServerSideProps with next-redux-wrapper with TypeScript?
- Make div go to next column everry time it's value is divisible by 5
- React: Set a select input back to the default value after submitting
- Reactjs after build got not found when refresh in a specific Url
- NavLink always get active class on query
- Save React-Bootstrap xs,sm,md,lg,xl spans/offsets into css class
- How do I include an onCLick inside a for loop in React?
- Why I don't see all the keys and values of an object when its keys are long strings?
- Manipulate context data to pass input to Component
- Simple Bootstrap buttons not showing variant colors in React
- How to fix state variable contents not displaying
- Is it possible to change the rendered output of a component by wrapping it in another component?
- How to hide ToolTip after x Milliseconds
- Ant design select - search and filter options other than value say title or key
- _this2.pressRow is not a function