React Custom Hook - Problem with getting the updated value of a custom hook

Question

I juste created a custom hook to update a value from a calendar picker, and getting it updated in a Form component.

export const useCalendar = (props) => {

    const [startDate, setStartDate] = useState("");

    useEffect(() => {
        console.log("startDate 2", startDate);
    }, [startDate]);

    return {startDate, setStartDate}
};


export const CalendarPicker = () => {

    const { startDate, setStartDate } = useCalendar();

    const handleDayPress = (newDateObject) => {
        setStartDate(newDateObject);
    }
};

export const Form = () => {
    const { startDate } = useCalendar();

    useEffect(() => {
        console.log("startDate", startDate);
    }, [startDate]);
}

The value is getting updated in the custom Hook but not in the Form component

Getting the value updated from the custom Hook to the Form

The state at `useCalendar();` is not global. Every time you call `useCalendar();`, a new, local, independent, state is created. Show us the JSX structure of your components (does `
` use `` in its JSX)? So we can help you better — acdcjunior, Nov 06 '22 at 14:34
Thanks for the quick reply, yes they both have JSX. I just wanted to get the date picked to the **Form** component to send data, not event to display it. There is something I don't understand, the custom hooks were created to extract logic from component and can reuse it on other components isn't it ? So why it is creating a new local state is created ? Should I use redux store so to make the state global ? Sorry for the formatting, it's the first time I'm posting on stackoverflow ^^ — Marc Habib, Nov 06 '22 at 14:41
A custom hook works like you pasted the hooks code right at that place where you call it. So it should be clear that every time you call `useCalendar();`, a new `useState()` is called. If you want to share state, the best approach depends on how your components are related (is `CalendarPicker` a child of `Form`? vice-versa?), because there are some simpler alternatives before having to use redux. For instance, you can just have the state in the parent and pass as prop to the child. You can also use hook `useContext()`. Redux will only be needed in very complex scenarios. — acdcjunior, Nov 06 '22 at 14:44
Ok so indeed, the `CalendarPicker` is a child of the `Form` component, but not the direct child. I wanted to extract logic to avoid passing props & callbacks from child to another. I think the best approach is to use `useContext()` hook right ? — Marc Habib, Nov 06 '22 at 14:50
Yeah, very likely. If you are willing to use external libs, there are other options too. But using "regular" React, `useContext()` is the better. Do you want me to draft an example? — acdcjunior, Nov 06 '22 at 15:44
Thanks fro the help ! I managed to do everything yesterday and make it worked ! — Marc Habib, Nov 07 '22 at 18:14

React Custom Hook - Problem with getting the updated value of a custom hook

0 Answers0