There https://reactjs.org/docs/hooks-overview.html : https://reactjs.org/docs/hooks-state.html https://reactjs.org/docs/hooks-effect.html https://reactjs.org/docs/hooks-custom.html https://reactjs.org/docs/hooks-reference.html (Native Hooks with specific functions)In short:"When would I use Hook? If you write a function component and realize you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component. "By..."When would I use a hook? If you write a function component and realize that you need to add some state to it, you previously needed to convert it to a class. Now you can use a hook inside the existing function component. "It was thought for people who are not essentially JS programmers, and have difficulty understanding how the this works in language, so before the person had to understand this:class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return ( <div> <p>You clicked {this.state.count} times</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> </div> ); } } And now she just needs it:import { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } Basically you have a constructor function that returns two values, the first is the created object and the second is a setter that changes the initial value, more or less like this:class Hook { constructor(initialValue) { //Define o valor inicial passado por parâmetro this.value = initialValue //Define a função que altera o valor const setter = newValue =&gt; this.value = newValue //Retorna o objeto criado e a função setter return [this, setter]; } //Retorno como string do objeto toString() { return this.value; } } const [value, setter] = new Hook('foo'); console.log(value); setter('bar'); console.log(value); //Aqui vai retornar o valor do toString console.log('Esse é o valor: '+value); //Equivalente a console.log('Esse é o valor: '+value.toString());What will change in the way Reacts projects are created?You can continue using classes and will not change anything, but it is now possible to create more complex components in React with simple functions. But it is important to remember that the Hooks are available only in version 16.8 or higher.

vc would need to use context ..but the explanation would be very complex then vc can use direct hook create a file called useSuaPage.ts, it returns a functionexport const useSuaPage = () => { const [descricao, setDescricao] = useState(''); return {descricao, setDescricao} } you use this function in the components as followsconst {descricao, setDescricao} = useSuaPage() orconst {descricao} = useSuaPage() const {setDescricao} = useSuaPage() that should work ....but study contexts

You can use the hook useEffect const [prods, setProds] = useState(null); //esta função será chamada quando houver alteração na variavel de estado (prods) useEffect(() => { const handleCreatePdf = () { // implemente a requisição de criar o pdf } handleCreatePdf(); }, [prods])

As you were doing, by rendering the whole component, it was soon firing a button function. In order that this does not occur, the right may pass a reference of the function to the onClick and there are three ways to make one would be using the bind, another using a arrow function within onClick, which is more common nowadays. And when you pass one onClick={function()} soon when rendering, this function will be fired, something that can also be exchanged for onClick={function}.onClick={() => logout()}. Or even the way you did, turn your function into an arrow function and just use onClick={logout}. https://reactjs.org/docs/faq-functions.html

Try using require rather than {uri:}:<Image style={styles.imagePost} source={require(item.path)} /> <Image style={styles.imagePost} source={require(item.path)} /> require works best for images that are in place.For more information <Image />, go to https://reactnative.dev/docs/image .

O useEffect is a hook that performs after the first rendering of the component and after subsequent renderings whenever any of the past dependencies is changed. What is happening in your case is that, in the first rendering of the component, the vector prods is, in fact, empty, so it always ends up entering this condition of if.To fix this problem, use a ref which stores the first rendering information, as in the code below.const firstRenderRef = useRef(true); useEffect(() => { if (firstRenderRef.current) { firstRenderRef.current = false; return; } if (prods.length < 1) { alert("Você não tem produtos"); history.push('/consulta'); } }, [prods]); If situations like this end up getting very common, consider creating a custom hook for it.function useStateUpdate(handler, deps) { const firstRenderRef = useRef(true); useEffect(() => { if (firstRenderRef.current) { firstRenderRef.current = false; return; } return handler(); }, deps); } That way, your final code would look like that.useStateUpdate(() => { if (prods.length < 1) { alert("Você não tem produtos"); history.push('/consulta'); } }, [prods]);

Remember that TypeScript cannot guarantee, only from one definition of guys, that a value in fact will have that guy.Get back to your guy Themes:type Themes = 'light' | 'dark'; See that it only accepts strings that are exactly light or dark. However, the type string (returned by method localStorage.getItem) is a string.And, of course, the string type, representing the infinite possibility of strings, is much wider than its type Themes, which encodes only two of these possibilities.Therefore, TypeScript rejects your code – and rejects correctly. Only with what it has, there is no guarantee that the variable storage (of the type) string, which came from the method getItem) In fact it is attributable to the type light or dark. Nothing would prevent it from being a string modified-haha.This is the case of using a TypeScript feature called https://www.typescriptlang.org/docs/handbook/advanced-types.html#type-guards-and-differentiating-types . You basically use mechanisms in runtime (Statically understood by TypeScript) that can claim, for sure, that the value you are using is the desired type.A simple example:type Theme = 'dark' | 'light'; const userTheme = localStorage.getItem('MY_PAGE_THEME'); if (userTheme === 'dark' || userTheme === 'light') { // Aqui o TypeScript é capaz de determinar que o tipo de rawTheme é Theme: const ok: Theme = userTheme; // Não dá erros. } Another option is to deny the condition and use a disruptive mechanism (which modifies the flow of code) within the conditional block, such as an exception release or return function:type Theme = 'dark' | 'light'; function normalizeTheme(raw: string | null): Theme { if (!(userProvidedTheme === 'dark' || userProvidedTheme === 'light')) { return 'dark'; // Valor padrão, obviamente do tipo Theme. } return userProvidedTheme; // Ok. Aqui o TypeScript tem certeza que trata-se do tipo Theme. } const userTheme = localStorage.getItem('MY_PAGE_THEME'); const theme = normalizeTheme(userTheme); It is very important to understand the difference between static checks made by TypeScript and the difference between code runtime. Eventually, Conduct, TypeScript need that you rate checks on runtime (coded via guards) so that it can ensure that a more generic value is actually of a more unique type.Of course, the guard may eventually contain errors of logic. But that is not the fault of TypeScript, which has no choice but to delegate this type of manual verification to the programmer. In summary, see guards as an extremely powerful feature, but that should be used carefully.

I don't know if it's right, but see if that code solves the problem:import React, { useState, useEffect } from "react"; const App = () => { const [getVetImg, setVetImg] = useState([]); function addVetImg(value: string) { const vet = getVetImg; // talvez seja preciso usar this.getVetImg() ou this.getVetImg dependendo do contexto e ainda acrescentar o tipo da variavel, sendo const vet: string[] = getVetImg vet.push(value); // ou vet[0] = value; setVetImg(getVetImg =&gt; vet); } // desta forma, pode chamar addVetImg("teste.png"); em qualquer lugar onde for usar esse código };

Try this :).const signIn = async (email: string, password: string) => { const { data } = await login (email, password) setToken(JSON.parse(data)[0].Token) setIdUsuario(JSON.parse(data)[0].idUsuario) setApelido(JSON.parse(data)[0].Apelido) if(JSON.parse(data)[0].Token !== undefined){ localStorage.setItem('@minha-carteira:logged', 'true'); localStorage.setItem('@minha-carteira:usuarioId', idUsuario!); localStorage.setItem('@minha-carteira:nomeUsuario', apelido!); localStorage.setItem('@minha-carteira:token', token!); setLogged(true); } }

Good morning, Eder all right? No react a expression:return( if(login1 != login && senha1 != senha){ alert("Senha incorreta") <Denied /> } else { alert("Acesso liberado") <Sucess /> } ) It's incorrect. I believe you are using JSX, so you could doif(login1 != login && senha1 != senha){ alert("Senha incorreta") } else { alert("Acesso liberado") } return( {login1 != login && senha1 != senha ? <Denied /> : <Sucess />} ) These 3 elements must be within the render return of the App component as well. <TextInput secureTextEntry={true} placeholder='Login' onChangeText={(login1)=>setlogin1(login1)} maxLength={10}></TextInput> <TextInput secureTextEntry={true} onChangeText={(senha1)=>setsenha1(senha1)} maxLength={10} <TouchableOpacity style={styles.botaolog} onPress={ConfereSenha}>ENTRAR</TouchableOpacity> However, even with the fixes, it will not work the way you expect. Your code has a set of other errors. I would advise you to look at the documentation of the https://reactnative.dev/docs/intro-react so you could correct the errors of logic and JSX.

He has a problem in React, in which he tries to render ALL and then go riding the components slowly, and in that render all of these errors. Do as follows on the part {musicas.map((musica) => ( <CardContainer key={String(musica.id)}>{musica.title}</CardContainer> ))} do the following{musicas && musicas.map((musica) => ( <CardContainer key={String(musica.id)}>{musica.title}</CardContainer> ))} or{musicas ? musicas.map((musica) => ( <CardContainer key={String(musica.id)}>{musica.title}</CardContainer> )) : (<div> Teste </div>)} See if you solve your case.

Your problem is in the list of dependencies of your useEffect, see you pass lista No array of dependencies, and internally you update this state after the request is complete, making this change the value of lista and useEffect loop. Overall you just need to remove the list of dependencies from useEffect. useEffect(() => { api.get("/lista_livros").then(({ data }) => { setLivros(data); console.log(data); }) }, []); Important to note that in the case of objects, arrays and functions the react will not compare each item or attribute, it will only compare the reference.To add a new item to the array, simply update the state by adding the new item. function addLivro() { api.post("/lista_livros", novo_livro) .then(() => setLivros(prevValue => [...prevValue, novo_livro])) } In the example above the new item will be added only after the request is successfully completed. https://odesenvolvedor.com.br/javascript-atribuicao-por-referencia-x-atribuicao-por-valor.html https://pt-br.reactjs.org/docs/hooks-effect.html

Using the useRef may not be the best choice, .current may be confused when used with the same reference by other elements. In my opinion the best choice would be to create a single component Dropdown and keep the individual state for each component, so you would avoid sharing hooks. Another solution is you use as a dropdown state an object that keeps the Boolean values for each of the elements, something like the following:const [dropdown, setDropdown] = useState({"Dashboard": true, "Tickets": false}) The two methods work, but I would choose to abstract everything in one component.

Solved.I just needed to call the firestone inside to book screensThis way:import 'firebase/firestore';const db = firebase.firestore();db.collection( ...

I'm realizing that you've written more than you need, I decided to create a minimum example demonstrating the rendering of the clicked component only, with useCallback and memo that checks in a shallow way if the value has actually changed:const ButtonDefault = window.styled.button` width: 30px; height: 30px; border-radius: 50%; margin: 4px; background-color: ${props => props.status ? 'yellow' : '#efefef'} `; const Button = React.memo((props) => <ButtonDefault {...props}/>); function App() { console.log('clicou'); const [list, setList] = React.useState(Array(60).fill(false)) const handleOnClick = React.useCallback((e, index) => { let item = [...list]; item[index] = !item[index]; setList(item); }, [list]); return ( <div> <div> { list.map((i,x) => <Button onClick={e => handleOnClick(e, x)} status={i} key={x}>{(x + 1)}</Button> ) } </div> <hr /> <div>Quantidade de selecionados: {list.filter(x => x === true).length}</div> </div> ) } ReactDOM.render( <App/> , document.getElementById('root'));<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script><script src="https://unpkg.com/react-is/umd/react-is.production.min.js"></script><script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script> <div id="root">Carregando ...</div>At each click on the button only it is changed, and this denotes performance in component rendering, not having those famous locked reported in the question.

Your code has a Promise who has another Promise within a function resolve of the first Promise, and none of this is necessary, because, axios already returns one Promise and can be solved easily:async function pegaDados() { try { return await axios .get('https://cd8wxyy7ba.execute-api.sa-east-1.amazonaws.com/dev/products'); } catch (e) { console.log(e); } } is one of the ways of solution with async/await where this function returns the information from API or else an error where it can be checked.Functional example with /questions/tagged/react using then, because here on the site does not work unfortunately async/await, but nothing prevents using, for example:function App() { const [data, setData] = React.useState([]); const loadData = () => { axios.get('https://cd8wxyy7ba.execute-api.sa-east-1.amazonaws.com/dev/products') .then(result => setData(result.data)); } React.useEffect(() => { loadData(); }, []); if (data.length === 0) { return <div>Carregando ...</div>; } return ( <React.Fragment> {data.map(item => ( <div> {item.productSku} - {item.productDescription} </div> ))} </React.Fragment> ) } ReactDOM.render( <App/> , document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <div id="root"></div>

HooksYou will replace life cycle functions with hooks. The state, too. So read https://pt.stackoverflow.com/a/514280/100416 if you have any questions about them in general.useEffectThe hook https://reactjs.org/docs/hooks-effect.html can have similar behavior componentDidMount and componentWillUnmount. Can because it has an array of dependencies, which indicates when the past callback should run again.The hook runs after each render, but the callback runs only if something inside the dependency array is modified. So if the array is empty [], it will work as componentDidMount.No useEffect, we can also return one https://reactjs.org/docs/hooks-effect.html#example-using-hooks-1 . React will execute clean up when the component dismounts. However, as I mentioned earlier, the useEffect runs all over render, not just once. This is why React also cleans the effect of previous renders before performing the effect again in the next render.In summary, the clean up is executed before the effect is triggered again. If the dependency array is empty, the behavior will be like that of componentWillUnmount.function Component() { // O primeiro argumento é o callback a ser executado. // O segundo argumento é um array vazio, que fará com que o callback seja executado // apenas no primeiro render. useEffect(() => { const handleChange = () => { this.setState(SelectionToolbarStore.getState()); }; SelectionToolbarStore.addChangeListener(handleChange); return () =&gt; { // Aqui o clean up será executado apenas quando o componente for desmontar SelectionToolbarStore.removeChangeListener(handleChange); } }, []); return null; } useCallbackNote that I declared the function handleChange inside useEffect, since it is only used there. Otherwise, you would need to declare out and use as hook dependency.In this case, it could make use of https://reactjs.org/docs/hooks-reference.html#usecallback so that React does not create a new function reference for each rendering. I talk a little about it https://pt.stackoverflow.com/a/514391/100416 . The code would look like this:function Component() { const handleChange = useCallback(() => { this.setState(SelectionToolbarStore.getState()); }, []); useEffect(() => { SelectionToolbarStore.addChangeListener(handleChange); return () =&gt; { SelectionToolbarStore.removeChangeListener(handleChange); } }, [handleChange]); return null; } This code will work the same way as the other, with the empty dependency array. This is because the function reference will be created once, thanks to the useCallback, which will be in the first render. It's important to understand that.useStateThe initial value of useState must be declared as informed in the question. The initial value is established in the first render. It can be an import, can be passed by prop, can be a constant.import { valor1 } from './valor1'; function Component({ valor2 }) { const [val1, setVal1] = useState(valor1); const [val2, setVal2] = useState(valor2); const [val3, setVal3] = useState('Qualquer coisa'); return null; }

I'll give you a basic example:const MeuComponente = () => { const [counter, setCounter] = useState(0); const incrementCounter = useCallback(()=>{ setCounter(counter + 1); },[]) return ( <h1>{counter}</h1> <button type="button" onClick={()=> incrementCounter()}>Incrementar</button> ) } export default MeuComponente; In the above form without an array of dependencies, at the time the react creates the function incrementCounter the value of counter It is 0.Then by calling it in the click of the button, the set of a new value is passed (counter + 1). Note that this counter valley 0, then the new value for counter sera 1.However in the next clicks on the button when calling the increment function, the value of the variable counter inside remains 0, because this function was only created once with the useCallback, and the value contained in it is still that the counter was 0.That is, from that no matter how many clicks give the counter value button will always be displayed as 1, but within the function it is still 0.This means that the counter value was not updated there within the function.To make the value inside is updated and reflects the actual value, it is necessary to include it in the dependency array.This makes the function sophrase an update and that the values contained therein are updated based on this array of dependencies.const MeuComponente = () => { const [counter, setCounter] = useState(0); const incrementCounter = useCallback(()=>{ setCounter(counter + 1); },[counter]) return ( <h1>{counter}</h1> <button type="button" onClick={()=> incrementCounter()}>Incrementar</button> ) } export default MeuComponente; Of course it's just an example, the ideal would be when making setCounter(prev=> prev + 1), this would avoid having to pass dependencies to the useCallback.

The problem is simple to solve, I think it was unnecessarily complicated. See the code:const [isLoading, setIsLoading] = useState(false) useEffect(() => { setIsLoading(true) fetchSales() setIsLoading(false) }, [dayInitial, dayFinal]) Inside useEffect, you put the isLoading as true, called the function fetchSales and put isLoading as false, without waiting for search be executed. With this, React even updated the state of isLoading For true, because it does batch update.To resolve, just use an asynchronous function:const [isLoading, setIsLoading] = useState(false) useEffect(() => { async function fetchData() { setIsLoading(true) await fetchSales() setIsLoading(false) } fetchData(); }, [dayInitial, dayFinal]) In this way, the state will update, we will wait for search be executed and then update the state again.About your console.log not working, you have seen that the useState has an asynchronous behavior and has not understood. https://pt.stackoverflow.com/a/484880/100416 that is well answered. In summary, what happens is that the value is updated only in the next surrender.

https://reactjs.org/docs/optimizing-performance.html from the app is a very extensive subject. The question title concerns optimizing rendering, and this can be taken to two interpretations: avoiding unnecessary rendering or rendering rendering computationally less costly.The body of the question demonstrates a concern about the declaration of functions or constants in the functional component, which are re-declared in all rendering. This will be the focus of the answer written here.When does re-rendering occur?It is important to know when a re-rendering occurs before trying to optimize this. The author of the question already seems to know about, but follows a brief summary. Re-rendering occurs when:The root node of the tree is of different type (e.g. <div> <a>Oi</a> </div> and <button> <a>Oi</a> </button>);Some attribute has been modified (e.g. <div className="a" /> and <div className="b" />);Some component property has been modified (e.g. <Timer time={10} /> and <Timer time={15} />);Some state of the component has been modified;The comparison of us children finds differences. This comparison is a recursion in both trees at the same time, comparing knot to knot.Source of the quote: https://pt.stackoverflow.com/a/514307/100416 How to avoid (or improve) re-renderings on functional components?React.memoThe question https://reactjs.org/docs/react-api.html#reactmemo . It can be used to avoid re-rendering based on Props received. If your functional component you use React.memo also use useState, useReducer or useContext, it will continue to re-address in state or context changes.function MyComponent(props) { // ... } function areEqual(prevProps, nextProps) { // Retorne true se nextProps retornaria o mesmo resultado a ser renderizado // que prevProps, senão retorne false } export default React.memo(MyComponent, areEqual); useCallbackYou can use the hook https://reactjs.org/docs/hooks-reference.html#usecallback to maintain the reference of a function, since a new reference is created to each render. O useCallback returns a callback memoized. When is that useful? Well, when that function is in https://pt.stackoverflow.com/q/514236/100416 from another hook.It also ends up serving for the standard comparison of the props performed by React, since it will realize that it is the same function. But if you are to use useCallback thinking about it, it might be simpler to use React.memo in the child component and compare only the necessary properties, depending on your needs. If this function really is changeable, then the useCallback can make sense.const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b], ); useMemoO https://reactjs.org/docs/hooks-reference.html#usememo returns a memoized value. The documentation recommends the use of this hook for computationally expensive calculations. Note that the code will run during rendering, so if it's something too time-consuming, the screen will be locked and you should solve it otherwise.If you have an expensive calculation that changes only from time to time, according to variables (also have an array of dependencies), or that is always the same value, the useMemo can yes be a solution to make re-rendering cheaper. In this case, useMemo will not avoid new re-renderings, has nothing to do with it, it will only make them cheaper.const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); Note: In the future, React can choose "forget" some memoized values and recalculate them in the next render to, for example, release memory of components that are not on screen.I made a more detailed description of the useCallback and useMemo https://pt.stackoverflow.com/a/515273/100416 If you want more details about it.useRefThe statement of constants is a concern pointed out in the question. It is possible to use useMemo to maintain the reference of an object or array, but there are options that can be more suitable for this, as pointed out https://blog.logrocket.com/rethinking-hooks-memoization/ .As you do not want to memoize a value in this case, but rather keep the reference, can make use of https://reactjs.org/docs/hooks-reference.html#useref . O useRef is like a "box" that stores a changeable value in the property .current.Even, it's in https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables the answer to your doubt about whether there is something in functional components such as the declaration of constants in classes, in free translation:The "ref" object is a generic container whose current property is changeable and can contain any value, similar to an instance property in a class.Example:function Bla() { // Inadequado: // const baz = useMemo(() => [1, 2, 3], []) // Adequado: const { current: baz } = useRef([1, 2, 3]) return <Foo baz={baz} /> } It's not so simple to improve performance. You need to understand what's getting in the way before you try to fix it or you can end up getting worse. https://pt.stackoverflow.com/q/448204/100416 .But when it is to modify something, I believe that this response has well addressed the points for functional components with the three hooks cited (useCallback, useMemo and useRef) and HOC React.memo.