Re-render MathJax after <Link> Click (Next.js)

[LordoCreations]

When I use next/link to load a page, the MathJax does not render properly vs. when I reload the page

[fast-reflexes]

Hi!

This suggests that the component is not remounted when you press the back button which sounds odd. Some research is warranted so either you could provide some sandbox to illustrate this (even though this might be hard with NextJS) or I will take time some day and try to replicate it.

But you could investigate your end if the problem is that? Typically, the component with the math should be unmounted and then remounted when you press the back button. If this is not the case (e.g. the component stays mounted) you can try to set the dynamic flag on the MathJax component. Also, make sure that your MathJaxContext is never unmounted (e.g. it wraps the persistent base part of the app).

[LordoCreations]

Sorry for the late response, I was away on hiatus :/ I'm using a web scraper for problems, and so I'm just using MathJaxContext. What do you mean when you say "wraps the persistent base part of the app"?

My code

// import $ from "jquery";
import { MathJax, MathJaxContext } from "better-react-mathjax";
import React from "react";
import Answer from "./Answer.jsx";

export default function Problem(props) {
  const config = {
    "fast-preview": {
      disabled: true,
    },
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true
    },
    messageStyle: "none",
  };

  const listItems = (props.ans) ? props.ans.map((i, a) => ( <Answer answer={i} key={a} />)): null
  return (

      <MathJaxContext
        version={2}
        config={config}
        onStartup={(mathJax) => (mathJax.Hub.processSectionDelay = 0)}
        className="problem"
      >
        <div className="problemcontent">
          {props.children}
          <br/>
          <ol type="A" className="choices">
            {(listItems)?listItems:null}
          </ol>
        </div>
      </MathJaxContext>
  );
}

[fast-reflexes]

By persistent part of the app, I mean the part that does not rerender. For example the very root of the app does not rerender so I suggest you put your MathJaxContext right inside there as suggested in the docs.

Also, you're not using MathJax components... MathJaxContext will only render on initial load and this is not the recommended way to use this library. As a matter of fact, what you're seeing is the expected result from not using MathJax components... try wrapping the div with class problemcontent in a MathJax component and see if it works then. Let me know how it goes.

[LordoCreations]

👍 It works now

but next 13 is out now and I want to use server side components with MathJax, but useRef is in the code which means that I have to use client components. Is there any way to bypass this?

[fast-reflexes]

Great! I suggest then we close this ticket and then you can add a new one with those requests. I have been thinking about that in the past and it would be nice to have. I don't have time for it very soon though but I will lokok into it eventually if noone else does :) Thanks for reporting it!