SolidJS needs urgently a feature for an easy bidirectional communication between parent and child components

[JaielZeus]

I am really missing an easy way of communicating things between parent and children components. I can use props in SolidJS to give a callback to a child component so the children can invoke things in the parent easily. Thats fine and dandy but what about the other way around? I would like to invoke a fucntion or signal inside of the child somehow. I could imagine giving a signal down to the child and the child can create an effect and react to the signal changed like that.

I think though there could exist an easier more elegant way in solid to accomplish that even if it is all just syntactic sugar in the end over the mechanism we can use right now to accomplish this as I described. What do you think?

[atk]

Why not use props? Changing a prop from the parent will trigger reactive effects inside the child component.

[atk]

No, but they would provide another solution to your problem. The parent can read the ref from the child - and it need not contain a HTML element, like I said. If you are already using a ref, a custom directive would work, too.

[JaielZeus]

I'm sorry but I am not using refs, I implied I use props to give signals down. Anyways this is not really helping my cause here. What you said at the top is what I meant in my text so you didn't get it from my post it seems. My question is not related to "How would I do this or that", rather it is an inquiry like "Could we make it easier/better to do that?" but thanks for trying to help anyways of course

[atk]

My point is there are already multiple mechanisms to achieve what you want. While a simplification might be nice to have, it's not nearly as urgent as you claim.

[lighth7015]

Just pass a child that's a function, that way you can 'call into' the parent with data contained inside the child; it's not rocket surgery, lol. :p

[JaielZeus]

@lighth7015 Thanks for the suggestion. But what you said is just literally the second sentence in my post up there.

[snnsnn]

If you need to update a child state from its parent, elevating the state to the parent component is the easiest and most performant option. There are other methods too but since you specifically asked a solution that uses props, best option is, as always, using a callback.

import { Component, Setter, createSignal } from 'solid-js';
import { render } from 'solid-js/web';

const Child: Component<{ updateHandler: (setter: Setter<number>) => void }> = (
  props,
) => {
  const [count, setCount] = createSignal(50);
  props.updateHandler(setCount);
  return <div>Count: {count()}</div>;
};

export const App = () => {
  let handler: undefined | Setter<number>;

  const reset = () => {
    handler && handler(0);
  };

  const updateHandler = (next: Setter<number>) => {
    handler = next;
  }

  return (
    <div>
      <button onclick={reset}>Inc</button>
      <Child updateHandler={updateHandler} />
    </div>
  );
};

render(App, document.body);

A simple assignment will not work because we would be updating the props property not the actual variable:

import { Component, Setter, createSignal } from 'solid-js';
import { render } from 'solid-js/web';

const Child: Component<{ handler: undefined | Setter<number> }> = (
  props,
) => {
  const [count, setCount] = createSignal(50);
  props.handler = setCount;
  return <div>Count: {count()}</div>;
};

export const App = () => {
  let handler: undefined | Setter<number>;

  const reset = () => {
    handler && handler(0);
  };

  return (
    <div>
      <button onclick={reset}>Inc</button>
      <Child handler={handler} />
    </div>
  );
};

render(App, document.body);

If you keep the state for updating the UI, it is best to create a ref function inside the parent component and pass it to the child. You can use either variable form or function form for the ref, I used function form for clarity.

import { Component, createSignal } from 'solid-js';
import { render } from 'solid-js/web';

const Child: Component<{ divRef: (el: HTMLDivElement) => void }> = (props) => {
  const [count, setCount] = createSignal(50);
  return <div ref={props.divRef}>Count: {count()}</div>;
};

export const App = () => {
  let divEl: HTMLDivElement | undefined;

  function divRef(el: HTMLDivElement) {
    console.log(el);
    divEl = el;
  }

  const handleClick = () => {
    divEl!.style.setProperty('color', 'red');
  };

  return (
    <div>
      <button onclick={handleClick}>Change Color</button>
      <Child divRef={divRef} />
    </div>
  );
};

render(App, document.body);

[ionut-botizan]

As others have already mentioned, refs are the proper way for a child to expose an API to its parent. That's perfectly in line with how you expose the DOM API on HTML elements referenced through refs.

For example, let's say you create a headless video player component that only renders the video, but it's the job of the host / parent component to implement the UI. The parent component will have to implement buttons which, when clicked, will have to tell the player component what to do.

Here's working sample code that mimics the above by implementing a <Player /> that exposes 3 methods and a property: play, pause, rewind and isPlaying

https://playground.solidjs.com/anonymous/00c1534f-cb43-4321-9ee4-dffbdef75fed

An outline of what's happening would be:

Child component

const Player = (props) => {
    const isPlaying = () => {/* implementation */ }
    const play = () => {/* implementation */ }
    const pause = () => {/* implementation */ }
    const rewind = () => {/* implementation */ }

    onMount(() => {
        //     👇  This is how you expose your component's API
        props.ref?.({ play, pause, rewind, isPlaying });

        onCleanup(() => {/* implementation */ })
    });

    return <>render something</>
};

Parent component

export const App = () => {
    let player;

    const togglePlayback = () => {
        if (player?.isPlaying()) {
            player?.pause()
        } else {
            player?.play()
        }
    };

    const rewind = () => {
        player?.rewind()
    }

    return (
        <div>
            <Player ref={player} />
            <hr />
            <button type="button" onClick={rewind}>↩️</button>
            <button type="button" onClick={togglePlayback}>⏯️</button>
        </div>
    );
};

One small issue with refs surfaces when using Typescript. Inside the component, props.ref will always be a setter function while outside, in the parent component, the ref will be whatever the setter function returned.

One way to stop Typescript from complaining about this, would be to use an identity function that simply returns the same component unmodified, but alters the type signature of the component.
This is how such a function would look like (signature inspired by React's forwardRef)

import { type Component } from 'solid-js';

export function forwardRef<R, P>(
  component: Component<P & { ref?: (val: R) => void }>,
): Component<P & { ref?: R }> {
  return component as any;
}

and would be used like this

type ChildProps = {/* props */}
type ChildRef = {/* exposed API */}

const Child = forwardRef<ChildRef, ChildProps>(props => {
  return <>implementation</>
})

const Parent = () => {
  let child: undefined | ChildRef

  return <Child ref={child} />
}

This will ensure proper typings on both the child's props param and the parents child variable.

(You can see the same <Player /> implementation but with typings here: https://playground.solidjs.com/anonymous/6511511c-7e1a-44e2-bd67-adb8b5ddba5a )

Hope this helps (both the OP and others that might stumble onto this discussion)! 👍

[lirc571]

It would be simpler to use the callback form to assign ref or use a signal when using TypeScript:

const Parent = () => {
  let child: ChildRef;

  return <Child ref={child} />
};

const Parent = () => {
  const [child, setChild] = createSignal<ChildRef>();

  return <Child ref={setChild} />
};

Full example: https://playground.solidjs.com/anonymous/b7fbc9b7-192f-4178-922f-c428837cb24b

[ross-oreto]

I agree with @JaielZeus on this topic.

SolidJS is very elegant until you arrive at this topic of Component communication.
The readability/maintainability decreases drastically as soon as I tried to expose a child component API to a parent.
While it's true there are ways to make this work, it's not pretty, especially with Typescript and especially if the child component has some reasonable complexity.
Given how common the need for this type of interaction is and that SolidJS is written in Typescript, I think there a lot of room here for some kind of improvement on this practice.