React board component doesn’t re-render with React 18

[eurubkov]

Good afternoon!

Thanks for the great library that makes it easier to make games!
I was experimenting with recreating a card game called The Game and I am running into the issue where I call moves.SomeMove(args) from the UI, which does update the state of G but the UI doesn't seem to recognize it. The reason I know it gets updated is because if I place the same card on the same pile twice, it gives me an invalid move error in the console (as expected).

I don't do much of the front-end development, so it's likely I am just doing something wrong.
Could anyone help me take a look at what it is?

This is my repo: https://github.com/eurubkov/the-game

To repro, just drag a card from the bottom row and drop it into any of the boxes at the top row. The top row should get updated with this new card and the card should disappear from the bottom row but neither of these things is happening.

The move: ./src/Game.js PlayCard
The Drop event in the UI: ./src/Board.js onDragDrop

Appreciate the time and help!

[delucis]

Thanks for the bug report! Our React client is currently incompatible with React 18 unfortunately, we need to update it.

For now you should be able to downgrade to React 17:

npm i react@^17 react-dom@^17 @testing-library/react@^12

And update src/index.js to use the React 17 API for setting up the app by doing the inverse of what is described in the 17 to 18 migration guide: https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis

Let’s keep this open to track React 18 support :-)

[eurubkov]

Thanks for the bug report! Our React client is currently incompatible with React 18 unfortunately, we need to update it.

For now you should be able to downgrade to React 17:

npm i react@^17 react-dom@^17 @testing-library/react@^12

And update src/index.js to use the React 17 API for setting up the app by doing the inverse of what is described in the 17 to 18 migration guide: https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis

Let’s keep this open to track React 18 support :-)

Appreciate the quick response! I will try it later and report back. How big of a job do you think adding React 18 support is going to be? I could try to tackle it

[delucis]

I haven’t had a chance to dive into React 18 enough to be sure, but I wonder if there’s some deprecated method used in the WrappedBoard class we return from the Client factory:

boardgame.io/src/client/react.tsx

Lines 94 to 192 in 3cef3bb

	return class WrappedBoard extends React.Component<
	WrappedBoardProps & AdditionalProps
	> {
	client: _ClientImpl<G>;
	unsubscribe?: () => void;
	static propTypes = {
	// The ID of a game to connect to.
	// Only relevant in multiplayer.
	matchID: PropTypes.string,
	// The ID of the player associated with this client.
	// Only relevant in multiplayer.
	playerID: PropTypes.string,
	// This client's authentication credentials.
	// Only relevant in multiplayer.
	credentials: PropTypes.string,
	// Enable / disable the Debug UI.
	debug: PropTypes.any,
	};
	static defaultProps = {
	matchID: 'default',
	playerID: null,
	credentials: null,
	debug: true,
	};
	constructor(props: WrappedBoardProps & AdditionalProps) {
	super(props);
	if (debug === undefined) {
	debug = props.debug;
	}
	this.client = RawClient({
	game,
	debug,
	numPlayers,
	multiplayer,
	matchID: props.matchID,
	playerID: props.playerID,
	credentials: props.credentials,
	enhancer,
	});
	}
	componentDidMount() {
	this.unsubscribe = this.client.subscribe(() => this.forceUpdate());
	this.client.start();
	}
	componentWillUnmount() {
	this.client.stop();
	this.unsubscribe();
	}
	componentDidUpdate(prevProps: WrappedBoardProps & AdditionalProps) {
	if (this.props.matchID != prevProps.matchID) {
	this.client.updateMatchID(this.props.matchID);
	}
	if (this.props.playerID != prevProps.playerID) {
	this.client.updatePlayerID(this.props.playerID);
	}
	if (this.props.credentials != prevProps.credentials) {
	this.client.updateCredentials(this.props.credentials);
	}
	}
	render() {
	const state = this.client.getState();
	if (state === null) {
	return React.createElement(loading);
	}
	let _board = null;
	if (board) {
	_board = React.createElement(board, {
	...state,
	...(this.props as P),
	isMultiplayer: !!multiplayer,
	moves: this.client.moves,
	events: this.client.events,
	matchID: this.client.matchID,
	playerID: this.client.playerID,
	reset: this.client.reset,
	undo: this.client.undo,
	redo: this.client.redo,
	log: this.client.log,
	matchData: this.client.matchData,
	sendChatMessage: this.client.sendChatMessage,
	chatMessages: this.client.chatMessages,
	});
	}
	return <div className="bgio-client">{_board}</div>;
	}
	};

My guess is that it could be a small change if we can spot what the needed change is. If you do have time, I’d love to look at a PR or answer any questions you might have :-)

(One hint might be in #1068 where someone reported componentWillUnmount maybe being an issue? But I’m not sure if that’s connected.)