Sorry if it's a beginner question>
I am trying to use Functional Component, as I was doing Class Component all the time.
I have a simple component that should load a list from a server, and display it.
The component looks like this (I simplified a bit so sorry if there is a type) :
const ItemRelationsList = (props: ItemRelationsListProps): JSX.Element => {
const [getList, setList] = useState([]);
const loadRelation = (): void => {
HttpService.GetAsync<getListRequest, getListResponse>('getList',{
// params
}).subscribe(res => {
setList(res.data.list);
});
}
loadRelation();
return (
<>
<Table
columns={columns}
dataSource={getList}
>
</Table>
</>
)
}
thew problem I face is that everytime I use setList, the component is redraw, so the http call is reexecute.
Is there a way to prevent that other than use a class component ?
use useEffect
If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array ([]) as a second argument. This tells React that your effect doesn’t depend on any values from props or state, so it never needs to re-run. This isn’t handled as a special case — it follows directly from how the dependencies array always works.
const ItemRelationsList = (props: ItemRelationsListProps): JSX.Element => {
const [getList, setList] = useState([]);
// componentDidMount
useEffect(() => {
loadRelation()
}, [])
const loadRelation = (): void => {
HttpService.GetAsync<getListRequest, getListResponse>('getList',{
// params
}).subscribe(res => {
setList(res.data.list);
});
}
return (
<>
<Table
columns={columns}
dataSource={getList}
>
</Table>
</>
)
}
useEffect(yourCallback, []) - will trigger the callback only after the
first render.
Read the Docs hooks-effect
This is related to How to call loading function with React useEffect only once
Related
I'm relatively new to React and was wondering why I'm getting a Functions are not valid as a React child. This may happen if you return a Component instead of from render error.
In my code there is an existing:
const SomeConst = SomeFunctionThatReturnsAComponent();
Now I am trying to update that const to have some logic before calling the function like so:
const SomeConst = (props) => {
//Some logic
return (SomeFunctionThatReturnsAComponent()());
}
Here is SomeFunctionThatReturnsAComponent():
const Template = component => (props) => {
const ReturnThisComponent = props => <Component component={component}, {props} />
return ReturnThisComponent;
}
The usage of SomeConst remains the same as the original implementation:
const SomeComponent = (props) => {
return (<SomeConst prop1="foo"/>)
}
I am wondering why this is not functionally the same thing and why I am getting this error. I have not been able to find a post that gets this error with the way I have it implemented. They are different implementations that arrive at this same error so they were not that much of a help to me.
If there is another post, I would kindly ask to link me to it and I will quickly remove this post and link it to the other post for future people.
Please let me know if I can clarify anything, I have tried to create this post as a repex.
tl;dr - you are missing one function call.
SomeFunctionThatReturnsAComponent()();
what does each parentheses do?
The first parens are calling the first function, that returns a function that returns ReturnThisComponent. If you call this function (Template) only once, you will still return a function (props) => { ... };
const Template = component => (props) => {
const ReturnThisComponent = props => <Component component={component}, {props} />
return ReturnThisComponent;
}
So either - call the function twice, or - remove the second curried function (props) => (and I think this is what you wanted to achieve). So it will look like:
const Template = (component) => {
const Component = component;
const ReturnThisComponent = (props) => <Component {...props} />;
return ReturnThisComponent;
}
I want to dynamically create a component, when I implement something like this:
const gen_Comp = (my_spec) => (props) => {
return <h1>{my_spec} {props.txt}</h1>;
}
const App = () => {
const Comp = gen_Comp("Hello");
return (
<Comp txt="World" />
);
}
Something goes wrong (what exactly goes wrong is hard to explain because it's specific to my app, point is that I must be doing something wrong, because I seem to be losing state as my component gets rerendered). I also tried this with React.createElement, but the problem remains.
So, what is the proper way to create components at runtime?
The main way that react tells whether it needs to mount/unmount components is by the component type (the second way is keys). Every time App renders, you call gen_Comp and create a new type of component. It may have the same functionality as the previous one, but it's a new component and so react is forced to unmount the instance of the old component type and mount one of the new type.
You need to create your component types just once. If you can, i recommend you use your factory outside of rendering, so it runs just when the module loads:
const gen_Comp = (my_spec) => (props) => {
return <h1>{my_spec} {props.txt}</h1>;
}
const Comp = gen_Comp("Hello");
const App = () => {
return (
<Comp txt="World" />
);
}
If it absolutely needs to be done inside the rendering of a component (say, it depends on props), then you will need to memoize it:
const gen_Comp = (my_spec) => (props) => {
return <h1>{my_spec} {props.txt}</h1>;
}
const App = ({ spec }) => {
const Comp = useMemo(() => {
return gen_Comp(spec);
}, [spec]);
return (
<Comp txt="World" />
);
}
I have created the following context provider. In sort it's a toast generator. It can have multiple toasts visible at the same time.
It all worked great and such until I realized that the <Component/> further down the tree that called the const context = useContext(ToastContext) aka the consumer of this context and the creator of the toast notifications, was also re-rendering when the providerValue was changing.
I tried to prevent that, changing the useMemo to a useState hook for the providerValue, which did stop my re-rendering problem , but now I could only have 1 toast active at a time (because toasts was never updated inside the add function).
Is there a way to have both my scenarios?
export const withToastProvider = (Component) => {
const WithToastProvider = (props) => {
const [toasts, setToasts] = useState([])
const add = (toastSettings) => {
const id = generateUEID()
setToasts([...toasts, { id, toastSettings }])
}
const remove = (id) => setToasts(toasts.filter((t) => t.id !== id))
// const [providerValue] = useState({ add, remove })
const providerValue = React.useMemo(() => {
return { add, remove }
}, [toasts])
const renderToasts = toasts.map((t, index) => (
<ToastNote key={t.id} remove={() => remove(t.id)} {...t.toastSettings} />
))
return (
<ToastContext.Provider value={providerValue}>
<Component {...props} />
<ToastWrapper>{renderToasts}</ToastWrapper>
</ToastContext.Provider>
)
}
return WithToastProvider
}
Thank you #cbdeveloper, I figured it out.
The problem was not on my Context but on the caller. I needed to use a useMemo() there to have memoized the part of the component that didnt need to update.
My goal is very simple. I am just looking to set my react context from within a reusable function-only (stateless?) react component.
When this reusable function gets called it will set the context (state inside) to values i provide. The problem is of course you can't import react inside a function-only component and hence I cannot set the context throughout my app.
There's nothing really to show its a simple problem.
But just in case:
<button onCLick={() => PlaySong()}></button>
export function PlaySong() {
const {currentSong, setCurrentSong} = useContext(StoreContext) //cannot call useContext in this component
}
If i use a regular react component, i cannot call this function onClick:
export default function PlaySong() {
const {currentSong, setCurrentSong} = useContext(StoreContext) //fine
}
But:
<button onCLick={() => <PlaySong />}></button> //not an executable function
One solution: I know i can easily solve this problem by simply creating a Playbtn component and place that in every song so it plays the song. The problem with this approach is that i am using a react-player library so i cannot place a Playbtn component in there...
You're so close! You just need to define the callback inside the function component.
export const PlaySongButton = ({...props}) => {
const {setCurrentSong} = useContext(StoreContext);
const playSong = () => {
setCurrentSong("some song");
}
return (
<button
{...props}
onClick={() => playSong()}
/>
)
}
If you want greater re-usability, you can create custom hooks to consume your context. Of course where you use these still has to follow the rules of hooks.
export const useSetCurrentSong = (song) => {
const {setCurrentSong} = useContext(StoreContext);
setCurrentSong(song);
}
It is possible to trigger a hook function by rendering a component, but you cannot call a component like you are trying to do.
const PlaySong = () => {
const {setCurrentSong} = useContext(StoreContext);
useEffect( () => {
setCurrentSong("some song");
}, []
}
return null;
}
const MyComponent = () => {
const [shouldPlay, setShouldPlay] = useState(false);
return (
<>
<button onClick={() => setShouldPlay(true)}>Play</button>
{shouldPlay && <PlaySong />}
</>
)
}
Every time I use react and the useEffect method my state variable renders twice. Once an empty variable and the next the desired variable. What can I try to help avoid this problem for now and in the future?
import React, { useState,useEffect } from "react";
export default function Member (props) {
const [team,setTeam] = useState([]);
useEffect(() => {
let array = ["hello","hi"];
setTeam(array);
}, [])
console.log(team);
return (
<>
{team.forEach(i => <p>{i}</p>)}
</>
)
}
You need to use map to render an array in JSX:
export default function Member(props) {
const [team, setTeam] = useState([]);
useEffect(() => {
let array = ["hello", "hi"];
setTeam(array);
}, []);
console.log(team);
return (
<>
{team.map(i => ( // use map here
<p>{i}</p>
))}
</>
);
}
forEach doesn't return anything, so you can't use it to render components like that.
Also in your code instead of using useEffect to setup initial state, you can just set it straight in useState:
export default function Member(props) {
const [team, setTeam] = useState(["hello", "hi"]);
console.log(team);
return (
<>
{team.map(i => ( // use map here
<p>{i}</p>
))}
</>
);
}
It is an abvious behavior.
Component render's first time with initial state. After useEffect (componentDidMount) again re-renders.
So you are getting two console.log.
To avoid this, you need to set the state initally,
const [team,setTeam] = useState(["hello","hi"]);
and remove useEffect.
Note: forEach won't print data, you need map here,
{team.map(i => <p key={i}>{i}</p>)} //provide a key here