I'm using Next 12.1
And i'm using dynamic import for import Components. And i want to use feautre router.push with shallow:true.
But when i call router.push (with shallow:true) so component re-render (flickr, refresh) always. When i import component directly, so component not re-render.
Any help please.
import Jaak from "#components/cloud/Project/Cozy/jaak"; //direct import
import dynamic from "next/dynamic";
Use Component
const RenderComponent = dynamic(
() =>
import("#components/cloud/Project/Cozy/jaak")
);
return <RenderComponent />; //with refresh
return <Jaak />; //no refresh
Can i use dynamic import and use router.push with shallow.true? (i want no refresh the component)
This is the sample
https://stackblitz.com/edit/nextjs-ccx2zk?file=components%2FJaakDynamic.js
I solved this problem.
Solution: Wrap useMemo to dynamic.
Related
I am a new react native developer, I found a component and I want to use it in a function, but it is not clear to me how I would change it, can I get a help?
Here is the component
import TagInput from 'react-native-tag-input';
...
<TagInput
value={this.state.emails}
onChange={(emails) => this.setState({ emails })}
labelExtractor={(email) => email}
text={this.state.text}
onChangeText={(text) => this.setState({ text })}
/>
I got the code from here https://bestofreactjs.com/repo/jwohlfert23-react-native-tag-input
I guess you are asking how to adapt the code to fit the functional component, which includes converting the this.setState.
React provides some thing called React hooks, which you can think of as a way to replace states and lifecycles. You can read more about it here here
In your case, it would go like this:
import { useState } from 'react';
...
// useState can only be called inside functional components
const [emails, setEmails] = useState([]);
const [text, setText] = useState('');
...
<TagInput
value={emails}
onChange={(emailTags) => setEmails(emailTags)} // to avoid naming confusion
labelExtractor={(email) => email}
text={text}
onChangeText={(inputText) => setText(inputText)}
/>
you don't need to convert the component itself, you can use it as it is, but you need to change its implementation.
Basically, if you want to use function components, which is highly recommended now, you need to change the usage of the state in the component which will contain the <TagInput>.
Instead of using "this" which points to the class itself, you need to implement a hook called useState.
You can find it the docs here: https://reactjs.org/docs/hooks-state.html
I have Components directory, there is js file Timer where I have countdown Component
const [countdownTimer, setCountdownTimer] = useState(15);
This component only returns <Text>{countdownTimer}</Text> on screen.
I also have another component Description. I want to handle this state in my Description component to make some changes after time has changed. The components aren't related (they aren't imported in each other)
I tried to import Description in Timer to send value as a props like
<Description setCountdownTimer={setCountdownTimer} />
and with style hide it but display: none isn't working on Android. I also try to just hide with another method
{false && <Description setCountdownTimer={setCountdownTimer} />}
but it's also not working, I got "undefined" in console.
For your case you should take a look at React Context: https://reactjs.org/docs/context.html
Hi #Danny If I understood your question correctly, you are trying to share the countDown state between two different components, and the way you try to do it may complicate you a bit, if not I suggest you use redux which is a library designed in order to manage the global states of applications, with redux you will be able to share the states of your application with several components.
You should need to create reducers and thanks to the createStore method from `redux you will be able to use a global state to your entire application
Here it's an example of code you can improve depending on your need :
import { createStore } from 'redux';
import reducer from './reducer';
import { Provider } from 'react-redux';
const store = createStore(reducer);
export default function App () {
return (
<Provider store = {store}>
<YourMainComponent />
</Provider>
)
}
You just need to wrapp your main component with the Provider component from 'react-redux' to access to your global state and manage it as you want. See more here
https://react-redux.js.org/introduction/basic-tutorial
Am trying to implement a chat app using ReactNative. The problem am facing is, after new item is added to the FlatList, am trying to scroll the FlatList items to the bottom so that the newly added message is visible.
When I checked the documentation, I can see a method called scrollToEnd(). But not sure how to use it as am following the Functional Component style of coding. Because when I googled, I can see examples where it uses the ref in a Class Component style coding.
But couldn't find how to use it in Functional Component!
I think you're looking for useRef
// I hope you don't mind the typescript
import {useRef} from 'react';
import {FlatList} from 'react-native';
export const Comp = () => {
const flatListRef = useRef<FlatList<any>>();
// however you detect new items
flatListRef?.current?.scrollToEnd();
return (
<FlatList
data={[]}
renderItem={() => null}
ref={flatListRef}
/>
);
}
But I think if you use inverted={true} on the flat list, it should snap to the top, or better bottom (I think).
For typescript you can use just:
const listRef = useRef<FlatList>(null);
and in your code you just need to check if your ref is exist:
listRef?.current?.scrollToIndex({animated: true, index: yourIndex})
I am using react native for development and i am using functional component for development. but i am facing problem in it. As i am getting callback from function and saving it in a state and i want to that component will render again. but component is not rendering again. Please check and provide me detail in
callBackfn = (callback) => {
this.setState({ infomationtosend: callback });
}
this is working fine as if i will print it on console get state correct output. but as it again goes in the ComponentTreat it doesn't render component again. i also tried useEffect but not working. can anyone provide me solution.
<Swiper
from={0}
>
<ComponentTreat
detailsend={this.state.infomationtosend}
appName={"sentText"}
CallBack={(callback) => this.callBackfn(callback)}
/>
</Swiper>
problem in swiper duw to swiper component is not refreshing.
Functional Component state change works like this:
// Inside parent component
const [info, setInfo] = useState(initalValue);
Then to use it in a callback we use closures to access it instead of using this keyword.
function callback(newValue) {
setInfo(newValue);
}
And pass it accordingly to the child props.
Also, checkout useCallback() if you use a lot of callbacks.
This is the code implementation in screenshot. I just created a simple application that contains one button and one input field where I'm saving the input text and printing in the log on console after button press but it shows in error with **const [enterGoal, setGoalState] = useState('')**. Can someone have a look on it?
The problem is you are using a class component and hooks are meant to be used in functional components. So thats the error. If you are using class try using setState method to update state and also define states in constructor. like
constructor(props){
this.state={
nameOfPerson:'robert'
}
}
and inside any function do this.setState({nameOfPerson:'wowo'}) to change it,,
you are using hooks in class components .hooks are working in functional componets
for example
import React, { 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>
);
}
for more check documentation