Today in SorninHeadachePost we have a new React render that doesn't occur.

I'll try to explain as best as I can and give maximum informations (do not hesitate if you think something is missing).

SO !

I have a React component named Navigation that should re-render once it's props change.

    //[...]
    const [availableViews, setAvailableViews] = useState(props.availableViews)
    const [userViews, setUserViews] = useState(props.userViews)
    const [_, forceUpdate] = useReducer((x) => x + 1, 0);

    useEffect(() => {
        setAvailableViews(props.availableViews)
    }, [props.availableViews])

    useEffect(() => {
        setUserViews(props.userViews)
        console.log("the log")
        forceUpdate()
    }, [props.userViews])

    return (
        <div className="navigation-root">
                <div className="navigation-title">
                    <img src={dashboardSVG} alt="Dashboard"/>
                    <span className="navigation-titleSpan">DASHBOARD</span>
                </div>
                <div className="navigation-tabContainer">
                    {
                        props.dataInitialized && availableViews.length > 0
                            ?
                            availableViews.map((d:ViewObject, key:any) => {
                                if (d.viewName.startsWith("Default ")) {
                                    let views: ViewObject[] = []
                                    for (let i = 0; i<userViews.length;i++) {
   //[...]

In this code snippet that represent the React component Navigation, the prop userViews changes on a user action, the log (the log) is being thrown on this action, so the prop is updated.

But nothing change....

May it be because the logic that use the state userViews is wrapped into a .map callback. (If it's because of this, how can it be rerendered)

As you can see I tried the hack of the reducer to forceupdate. Nothing changes either.

At this point I'm looking for a full rerender of this component so it updates all child components.